打包部署与优化
npm run build 用 Vite 打包：压缩 JS/CSS、Tree-shaking 去掉未用代码、自动给文件名加哈希（index-a3f9b2.js），防缓存。产物 dist/ 是纯静态文件，扔到 Nginx、CDN、GitHub Pages 都能跑。
常见优化手段：路由懒加载分包、组件异步加载（defineAsyncComponent）、图片压缩与懒加载、第三方依赖预打包（vite.config 配置 optimizeDeps）。部署 SPA 注意配置服务器：所有未知路径回退到 index.html（Nginx 的 try_files），否则刷新 /user/42 会 404。
- vite build 产物在 dist/，哈希文件名防缓存，静态托管即可
- 路由懒加载 + 异步组件 = 按需加载，首屏体积最小化
- SPA 部署关键：服务器把未匹配路径回退到 index.html
HTML
<!-- 1. Nginx 部署 SPA 的关键配置（否则刷新子路由 404） --> <!-- server { listen 80; root /usr/share/nginx/html; # dist 产物目录 location / { try_files $uri $uri/ /index.html; # 找不到的路径回退到 index.html } } --> <!-- 2. vite.config.js 常用优化配置 --> <script> // vite.config.js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], build: { rollupOptions: { output: { // 手动分包：第三方依赖单独成包，长期缓存 manualChunks: { vue: ['vue', 'vue-router', 'pinia'] } } }, chunkSizeWarningLimit: 1000 // 超过 1KB*1000 才警告 } }); </script> <!-- 3. 打包后检查体积 --> <!-- 终端：npx vite build --report 或装 rollup-plugin-visualizer -->
本节要点打包产物是纯静态文件；部署 SPA 必须让服务器回退到 index.html，分包与懒加载控首屏体积。
