vite构建需三步掌握：先确保node.js≥18和npm就位，再用npm create vite@latest一键创建vue3项目验证链路，最后深入理解开发阶段（vite dev，基于esm按需编译+hmr）与构建阶段（vite build，rollup打包+优化）的协作机制。
Vite 构建不是靠“背教程”学会的，而是通过理解角色、动手搭一次、再针对性调参三步走通的。核心不在于学多少命令，而在于搞清 Node.js、npm、Vite 三者怎么协作，以及开发和构建两个阶段分别在做什么。
Vite 构建的前提：Node.js 和 npm 必须就位
Vite 是基于 Node.js 运行的，没有它，连 vite 命令都执行不了。
- 确保已安装 Node.js ≥ 18（官方推荐，部分插件需 20+）
- 安装后自动带 npm，运行
node -v和npm -v验证 - 可选提速：用
npm config set registry https://registry.npmmirror.com切国内镜像
用一条命令创建可运行的 Vue3 + Vite 项目
不用手动配入口、写配置文件，Vite 官方脚手架直接生成开箱即用结构：
npm create vite@latest my-app -- --template vue cd my-app npm install npm run dev
浏览器打开 http://localhost:5173 就能看到欢迎页。这一步验证了整个链路是否通畅——从 npm 下载模板、Node.js 解析依赖、Vite 启动服务器、浏览器加载 ESM 模块。
真正掌握构建，重点看这三个环节
开发阶段（vite dev）
- Vite 不打包，只按需编译你当前访问的
.vue或.ts文件 - 修改代码后，靠 Node.js 的
chokidar监听文件变化，通过 WebSocket 推送更新（HMR） - 所有第三方库（如
vue、pinia）首次启动时被 esbuild 预构建为 ESM，缓存在node_modules/.vite
构建阶段（vite build）
- 运行
npm run build，Vite 调用 Rollup 打包整个src/ - 输出到
dist/目录：压缩 JS/CSS、自动代码分割、内联小资源、生成哈希文件名防缓存 - 默认目标是现代浏览器（ES2020），如需兼容 IE11，得加
@vitejs/plugin-legacy插件并设target: 'es2015'
环境与配置（vite.config.js）
- 大多数项目不需要这个文件，但遇到以下情况就得写：
- 开发时请求后端 API 跨域 → 配
server.proxy - 静态资源（如 logo.png）想放在根目录 → 改
public/或配build.rollupOptions.output.assetFileNames - 多环境变量（开发/测试/生产）→ 在
.env.development、.env.production里写VITE_API_URL=xxx，代码中用import.meta.env.VITE_API_URL读取
- 开发时请求后端 API 跨域 → 配
不复杂但容易忽略
