Vite 生产环境构建

开发时 Vite 靠浏览器原生 ESM 求快，但上线不能这么干。这一篇我们讲 npm run build 到底做了什么，以及怎么把产物部署出去。

build 背后发生了什么

执行：

npm run build

Vite 会切换到生产模式，用 Rollup（或 Rolldown）做完整打包，主要做这几件事。

把你的源码和依赖一起分析、打包，合并成少量文件。
移除没用到的代码（Tree Shaking）。
压缩 JS、CSS，降低体积。
给静态资源加上哈希文件名，便于浏览器长期缓存。
输出到 dist 目录（默认）。

整个过程专注于「小」和「稳」，和开发时的「快」是两套逻辑。

构建产物目录

dist 目录大致长这样：

dist/
├── index.html
├── assets/
│   ├── index-a1b2c3.js
│   └── style-d4e5f6.css
└── favicon.ico

index.html 里的资源引用已经指向带哈希的 assets 文件。
哈希值随文件内容变化，内容没变哈希就不变，所以能放心让 CDN 缓存很久。
public 里的文件原样躺在根下。

构建配置详解

常用 build 配置项：

export default defineConfig({
  build: {
    outDir: 'dist',          // 输出目录
    assetsDir: 'assets',     // 资源子目录名
    sourcemap: false,        // 是否输出 source map，排查线上问题时有用
    minify: 'esbuild',       // 压缩器，默认 esbuild，也可换 terser
    target: 'es2020',        // 产物语法目标，决定兼容到什么程度
    rollupOptions: {         // 透传底层 Rollup 配置
      output: {
        manualChunks: {
          vendor: ['vue']
        }
      }
    }
  }
})

sourcemap 设为 true 可以生成 .map 文件，线上报错时能映射回源码，但有体积和泄露源码的代价，生产一般按需开启。

rollupOptions 是进阶入口，当你需要对打包做精细控制（比如手动拆分 chunk）时在这里写，后面性能优化篇会展开。

用 preview 预览产物

构建完别急着上线，先本地验证产物是否和开发时一致：

npm run preview

它会启动一个静态服务器托管 dist 目录，默认地址同样是 http://localhost:4173/。这是「上线前最后一道自检」，能发现 base 配错、资源 404 之类的问题。

部署到常见平台

Vite 的产物是纯静态文件，几乎能部署到任何静态托管服务。

部署到 GitHub Pages 时要注意 base。如果你的仓库页地址是 https://用户名.github.io/仓库名/，必须设：

export default defineConfig({
  base: '/仓库名/'
})

Vercel 和 Netlify 更简单，构建命令填 npm run build，输出目录填 dist，它们会自动识别。这类平台还支持在 vite.config.js 里用环境变量区分不同部署。

对于自己的服务器，把 dist 整个目录上传到 Web 服务器根目录，或用对象存储 + CDN 托管即可。

本篇小结

build 用 Rollup/Rolldown 打包、压缩、加哈希。
哈希文件名让资源可长期缓存。
preview 是上线前自检产物的最佳方式。
部署到子路径（如 GitHub Pages）务必配对 base。

下一篇我们引入 TypeScript，让代码更健壮。

Vite 静态资源与样式

Vite 与 TypeScript