Vite 构建与部署

🎯 引言

学会这篇文章，你能把 Vite 项目打包成可以上线的静态资源，知道 dist 目录里每个文件的作用，还能把站点部署到常见的静态托管平台上。这是项目从开发到上线最重要的一步。

🧱 生产构建

执行：

npm run build

Vite 会基于 Rollup 把你的代码打包、压缩、分块，最终生成一个 dist 目录。

dist/
├── assets/
│   ├── index-xxx.js
│   ├── index-xxx.css
│   └── vendor-xxx.js
├── index.html
└── favicon.ico

✨ 构建配置常用项

指定输出目录

import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        outDir: 'build',
    },
});

生成 sourcemap

sourcemap 是源代码和压缩后代码之间的“地图”。

生产构建会把代码压缩成一行，变量名也会被缩短。如果线上报错，浏览器控制台里显示的是压缩后的位置，根本找不到原始代码写在哪里。开启 sourcemap: true 后，浏览器就能把错误还原回 src/App.vue 第 20 行这种原始位置，方便排查问题。

import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        sourcemap: true,
    },
});

关闭代码拆分

默认情况下，Vite 会把代码拆成多个文件。例如把 vue、element-plus 等第三方库打包成 vendor-xxx.js，把业务代码打包成 index-xxx.js。用户访问首页时只需要加载首页用到的文件，其他页面用到时再加载，首屏打开更快。

关闭代码拆分，就是把所有代码合并成一个文件。这就像把一本书拆成章节看（拆分）还是订成一册看（不拆分）。小项目或组件库可以考虑关闭，普通应用不建议。

import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                manualChunks: undefined,
            },
        },
    },
});

🛠 本地预览生产包

构建完成后，用 preview 命令本地测试：

npm run preview

默认在 http://localhost:4173/ 打开，和真实部署环境非常接近。

🚀 部署到静态托管

Vite 输出的是纯静态文件，可以部署到任何静态服务器：

• Nginx：把 dist 目录作为站点根目录。
• Vercel / Netlify：直接拖拽 dist 目录或连接 Git 仓库自动部署。
• GitHub Pages：把 dist 推送到 gh-pages 分支。

🧾 小节总结

• npm run build 生成生产包，默认输出到 dist 目录。
• 产物包含带哈希的 JS/CSS 资源、index.html 和静态文件。
• npm run preview 可以在本地预览生产包，检查上线效果。
• Vite 产物是纯静态资源，可部署到 Nginx、Vercel、Netlify、GitHub Pages 等平台。

❓ 知识问答

Q1：开发服务器启动正常，preview 却白屏怎么办？

常见原因是 base 路径配置错误或路由使用了 history 模式但服务器没有配置 fallback。检查浏览器控制台是否有 404。

Q2：dist 目录可以直接上传吗？

可以。dist 里的内容就是最终要部署的文件，直接上传到静态服务器即可。

Q3：如何清除构建缓存？

删除 dist 和 node_modules/.vite，再重新运行 npm run build。

🧪 小练习

完成一次完整的构建和本地预览：

1. 在 vite.config.js 中把 outDir 改成 output。
2. 运行 npm run build，查看生成的 output 目录。
3. 运行 npm run preview，确认页面正常显示。

import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        // 请在这里修改 outDir
    },
});

🎉 恭喜你完成了 Vite 课程的学习！现在你可以使用 Vite 创建项目、配置别名、使用插件、管理环境变量、优化依赖预构建，并把项目打包部署上线。