Vite 生产构建只需运行 npm run build，自动完成代码压缩、资源哈希、HTML 注入等；需检查 vite.config.js 中 base、outDir、define 等配置，并验证 dist 目录路径、资源加载及文件哈希。
在 JavaScript 项目中，使用 Vite 打包生产环境静态资源非常简单——只需一条命令，Vite 就会自动完成代码压缩、资源哈希、HTML 注入、CSS 提取等标准构建流程。
确认 vite.config.js 配置合理
Vite 默认配置已针对生产环境做了优化，但你仍需检查几个关键点：
-
base：若部署到子路径（如
/my-app/），需设置base: '/my-app/'，否则资源路径会 404 -
build.outDir：指定输出目录，默认是
dist，可按需修改（如build.outDir: 'public'） - build.rollupOptions.output.entryFileNames 等：如需自定义 JS/CSS/asset 文件名（例如加 hash 或分类），可在此调整
-
define：用于替换全局常量，比如
define: { '__APP_ENV__': JSON.stringify('prod') }，便于运行时区分环境
执行生产构建命令
在项目根目录下运行：
npm run build（或 yarn build / pnpm build）
立即学习“Java免费学习笔记（深入）”；
该命令会：
- 读取
vite.config.js（或vite.config.ts）中的build配置 - 以
production模式启动 Rollup 打包器 - 自动启用
terser压缩 JS、css-minify压缩 CSS - 为静态资源（JS/CSS/图片/字体）生成带内容哈希的文件名（如
index.a1b2c3d4.js），确保缓存失效正确 - 将最终产物写入
dist/目录（或你配置的outDir）
验证和部署前检查
构建完成后，建议快速验证几项：
- 打开
dist/index.html，确认所有<script>和<link>的路径是否正确（尤其注意base设置影响） - 用本地服务器预览（避免直接双击打开）：
npx serve -s dist或python3 -m http.server -d dist 8080 - 检查浏览器控制台有无 404 或 MIME 类型错误（常见于未正确处理 SVG、WebP 或自定义后缀资源）
- 查看
dist/assets/下文件是否含哈希，JS/CSS 是否被压缩（可粗略看文件体积和首行注释）
进阶：自定义构建行为
如需更精细控制，可在 vite.config.js 中扩展：
- 禁用 CSS 提取（内联到 HTML）：
build.cssCodeSplit: false - 强制生成 sourcemap（仅调试用，勿用于正式发布）：
build.sourcemap: true - 排除某些依赖不打包（如 CDN 引入的库）：
build.rollupOptions.external: ['vue']，并配合build.rollupOptions.output.globals - 添加构建钩子（如构建后自动复制 LICENSE 文件）：
build.rollupOptions.plugins.push({ writeBundle() { ... } })
