Vite 现代前端构建工具教程：开发服务器、环境变量与生产构建

文章定位：Vite、开发服务器、插件、环境变量、代理和生产构建

Vite 现代前端构建工具教程：开发服务器、环境变量与生产构建技术图

核心结论

Vite 在开发阶段利用浏览器原生 ESM，按请求转换模块；生产阶段再使用 Rollup 构建优化后的静态资源。因此开发服务器的启动速度不能替代对生产包体、缓存和加载链路的评估。

bash

npm create vite@latest web-app -- --template vue
npm install
npm run dev
npm run build
npm run preview

配置文件负责插件、别名、代理和构建策略。只有 VITE_ 开头的变量会暴露给浏览器，它们不是秘密，不能放密码、私钥或管理令牌。部署到子路径时同步配置 base，历史路由需要服务器回退到 index.html。

构建失败按 Node 版本、锁文件、插件版本、别名和环境变量排查；构建成功但页面空白，则检查资源路径、路由回退、浏览器控制台和接口地址。