create vite（建议收藏）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发领域，快速启动一个项目是提升开发效率的关键一步。create vite 是 Vite 官方提供的脚手架工具，它简化了项目初始化流程，并借助 Vite 的底层技术优势，为开发者提供了一个轻量、高效且灵活的开发环境。无论是初学者还是中级开发者，都能通过 create vite 快速构建现代化应用。本文将从零开始讲解如何使用 create vite，并深入剖析其核心原理与实践技巧，帮助读者掌握这一工具的精髓。

一、什么是 Create Vite？

Create Vite 是 Vite 官方提供的项目初始化工具，类似于 React 的 create-react-app 或 Vue 的 vue-cli。它的核心目标是通过一条命令快速生成一个包含基础配置的项目模板，让开发者无需手动安装依赖或配置构建工具，即可直接开始开发。

与传统构建工具（如 Webpack）相比，Vite 的核心优势在于：

1. 开发服务器启动快：利用原生 ES 模块（ESM）实现零配置热更新，无需打包即可实时响应代码修改。
2. 生产构建高效：通过 Rollup 实现快速打包，同时支持 Tree Shaking（摇树优化），减少最终 bundle 的体积。
3. 生态兼容性好：支持 TypeScript、CSS 预处理器、图片优化等常见需求，并可通过插件系统扩展功能。

比喻：如果将传统构建工具比作“需要组装的家具”，那么 Vite 就像“开箱即用的成品家具”——它省去了繁琐的组装步骤，让开发者直接享受高效体验。

二、快速上手：创建第一个 Vite 项目

1. 安装 Create Vite

在终端中运行以下命令即可安装 create vite：

npm create vite@latest  
yarn create vite  

运行后，系统会提示输入项目名称、选择框架（如 Vue、React、Svelte 等）和 Variants（如 TypeScript、CSS 预处理器等）。例如，选择 vanilla 框架和 TypeScript 会生成一个纯 JavaScript + TypeScript 的项目模板。

2. 进入项目并启动开发服务器

cd your-project-name  
npm install  
npm run dev  

启动后，浏览器会自动打开 http://localhost:3000，展示默认的欢迎页面。此时，开发者可以直接修改 src/main.js 或 src/main.ts 文件，实时查看效果。

三、项目结构解析

一个典型的 Create Vite 项目包含以下核心文件和目录：

关键文件详解：

• vite.config.js：通过 JavaScript 或 TypeScript 配置构建选项。例如，添加插件或修改输出路径：

  import { defineConfig } from 'vite';  
  export default defineConfig({  
    plugins: [], // 插件列表  
    build: {  
      outDir: 'dist', // 输出目录  
      minify: 'esbuild' // 压缩工具  
    }  
  });  
  

• package.json：包含脚本命令如 dev、build、serve，以及项目依赖。例如：

  {  
    "scripts": {  
      "dev": "vite",  
      "build": "vite build",  
      "serve": "vite preview"  
    }  
  }  
  

四、配置进阶：自定义开发与构建

1. 环境变量配置

Vite 支持通过 .env 文件管理环境变量，文件名需以 VITE_ 前缀开头（如 VITE_API_URL）。例如，在 .env.development 中定义开发环境变量：

VITE_API_URL=http://localhost:3001/api  

在代码中可通过 import.meta.env 访问：

console.log(import.meta.env.VITE_API_URL);  

2. 插件系统：扩展功能

Vite 的插件机制允许开发者通过社区生态或自定义插件扩展功能。例如，使用 vite-plugin-md 插件支持 Markdown 文件导入：

npm install vite-plugin-md --save-dev  

在 vite.config.js 中配置：

import mdPlugin from 'vite-plugin-md';  

export default defineConfig({  
  plugins: [mdPlugin()]  
});  

3. 优化构建性能

• 按需加载：通过代码分割（Code Splitting）减少初始加载时间。Vite 默认支持动态导入（import()）实现代码分割。
• 资源优化：配置 assetsInclude 将特定资源（如字体）包含到构建输出中：

  export default defineConfig({  
    build: {  
      assetsInclude: ['**/*.woff2']  
    }  
  });  
  

五、常见问题与解决方案

1. 开发服务器无法启动

现象：运行 npm run dev 后出现端口占用错误。
解决：检查 3000 端口是否被占用，或在 vite.config.js 中修改端口：

export default defineConfig({  
  server: {  
    port: 3001 // 修改为其他端口  
  }  
});  

2. 图片或字体资源未正确加载

现象：在浏览器中看到 404 错误，提示资源未找到。
解决：确保资源文件位于 public/ 目录下，或通过 import 语法引入静态资源：

import myImage from './assets/logo.png';  
document.body.style.backgroundImage = `url(${myImage})`;  

3. 生产构建后代码体积过大

现象：dist/ 目录中的文件体积远超预期。
解决：

• 检查是否引入了不必要的依赖
• 在 vite.config.js 中启用压缩：

  build: {  
    minify: 'terser', // 使用 Terser 进行压缩  
    terserOptions: {  
      compress: { drop_console: true } // 移除 console 语句  
    }  
  }  
  

六、实战案例：构建一个 Todo List 应用

1. 创建 Vue 3 项目

运行以下命令初始化 Vue 3 项目：

npm create vite@latest my-todo-app -- --template vue  
cd my-todo-app  
npm install  

2. 实现核心功能

在 src/App.vue 中编写 Todo 列表逻辑：

<template>  
  <div>  
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入任务..." />  
    <ul>  
      <li v-for="(todo, index) in todos" :key="index">  
        {{ todo.text }}  
        <button @click="removeTodo(index)">删除</button>  
      </li>  
    </ul>  
  </div>  
</template>  

<script setup>  
import { ref } from 'vue';  

const newTodo = ref('');  
const todos = ref([]);  

const addTodo = () => {  
  if (newTodo.value.trim()) {  
    todos.value.push({ text: newTodo.value });  
    newTodo.value = '';  
  }  
};  

const removeTodo = (index) => {  
  todos.value.splice(index, 1);  
};  
</script>  

3. 添加样式与 TypeScript 支持

通过 npm install --save-dev typescript @types/node 安装 TypeScript，并修改入口文件为 src/main.ts：

import { createApp } from 'vue';  
import App from './App.vue';  

createApp(App).mount('#app');  

结论

Create Vite 通过极简的设计和高效的底层实现，重新定义了现代前端项目的初始化体验。无论是快速验证想法，还是构建复杂应用，开发者都能借助其灵活的配置能力和丰富的插件生态，显著提升开发效率。

本文从基础命令到高级配置，结合实战案例，展示了如何利用 Create Vite 快速搭建项目，并解决常见问题。对于希望减少配置时间、专注于业务逻辑的开发者而言，Vite 是不可多得的工具选择。

未来，随着 Web 开发技术的演进，Vite 的生态将进一步扩展。建议读者持续关注官方文档和社区动态，探索更多可能性。