Vue3 打包

打包（构建）是把源码转换为可直接部署的静态文件的过程：.vue 单文件组件、TypeScript、ES 模块等浏览器无法直接识别的代码，会被编译、合并并压缩成少量 HTML/CSS/JS。

为什么要打包

• 浏览器不认识 .vue 单文件与 <script setup> 写法，需要先编译成普通 JavaScript。
• 散落的模块要按依赖关系合并，避免多次网络请求。
• 压缩体积、为文件名添加内容哈希，便于浏览器缓存更新。

打包命令

Vue3 官方项目使用 Vite 构建，在项目根目录执行：

npm run build

该命令等价于 vite build，Vite 会完成转译与压缩，输出类似：

vite v5.0.0 building for production...
✓ 42 modules transformed.
dist/index.html                   0.42 kB
dist/assets/index-B7xUf0.js    120.00 kB │ gzip: 36.00 kB

产物目录 dist

打包完成后，项目根目录出现 dist 文件夹，结构大致如下：

dist/
├── index.html        # 入口页面
└── assets/           # 打包后的静态资源
    ├── index-*.js
    └── index-*.css

将 dist 整个目录上传到任意静态服务器（Nginx、GitHub Pages、Vercel 等）即可上线。

预览打包结果

上线前先在本地验证生产构建是否正常：

npm run preview

浏览器访问提示地址（默认 http://localhost:4173/），确认页面与资源加载无误后再部署。

自定义打包配置

打包参数写在 vite.config.js 中：

// vite.config.js
export default defineConfig({
  base: '/my-app/',    // 部署在子路径时设置资源前缀
  build: {
    outDir: 'dist',     // 输出目录名
    sourcemap: false    // 生产环境关闭 sourcemap
  }
})

小结

Vue3 项目一条 npm run build 即可产出 dist 静态站点，配合 npm run preview 本地验收，之后把 dist 上传到任意静态服务器即完成部署。