经过前面一系列的实战，我们已经从零搭建起了一个功能完善的企业级后台管理系统。但是，代码目前还只能在本地通过 npm run dev 运行。
在真实的工作中，我们需要把代码发布到服务器上，让所有人都能通过域名访问。这就是前端工程化的“最后一公里”：打包构建与部署。
1. 什么是打包构建？
我们在开发时，写的是 .vue 文件、Sass/SCSS、TypeScript，并且使用了 ES6+ 的高级语法。浏览器是无法直接运行这些代码的。
打包构建（Build） 的过程，就是把这些浏览器看不懂的代码，翻译、压缩、合并成浏览器能看懂的纯粹的 HTML、CSS 和 JavaScript 文件。
在 Vite 项目中，只需要运行一条命令：
npm run build
运行完毕后，你会发现项目根目录下多了一个 dist 文件夹（Distribution 的缩写，意为“分发”）。这个文件夹里的内容，就是我们要部署到服务器上的最终产物。
2. 部署前的关键配置：Vite 的 base 路径
在执行 npm run build 之前，有一个极其容易踩坑的配置项：base。
默认情况下，Vite 构建出的 index.html 中引入 JS 和 CSS 的路径是绝对路径（例如 /assets/index.js）。这意味着你的项目必须部署在域名的根目录下（例如 https://www.example.com/）。
如果你的项目需要部署在子目录下（例如 https://www.example.com/admin/），你必须在 vite.config.js 中配置 base：
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
// 如果部署在根目录，保持默认的 '/' 即可
// 如果部署在子目录，例如 /admin/，则配置为 '/admin/'
base: '/',
build: {
outDir: 'dist', // 指定输出路径，默认为 dist
assetsDir: 'assets', // 指定静态资源存放路径
}
})
3. 部署方案一：传统企业级 Nginx 部署
在企业内部，最常见的部署方式是将 dist 目录下的文件放到 Nginx 服务器上。
3.1 为什么需要 Nginx？
Nginx 是一个高性能的 HTTP 和反向代理 Web 服务器。它可以非常高效地提供静态文件服务。
3.2 核心痛点：History 路由刷新 404 问题
如果你的 Vue Router 使用了 createWebHistory（History 模式），你会发现一个致命问题：
首页可以正常打开，点击菜单跳转也正常。但是，如果在某个子页面（比如 /user/list）直接按 F5 刷新，页面会变成 404 Not Found。
原因：
在 History 模式下，URL 看起来像真实的物理路径。当你刷新 /user/list 时，浏览器会向 Nginx 请求 /user/list 这个文件。但实际上，我们的 dist 目录下只有一个 index.html，根本没有 user/list 这个文件，所以 Nginx 返回了 404。
解决方案：
我们需要配置 Nginx，告诉它：“如果你找不到对应的文件，就把请求全部重定向到 index.html，剩下的路由逻辑交给 Vue Router 去处理。”
3.3 Nginx 配置示例
在 Nginx 的配置文件（通常是 nginx.conf 或 conf.d/default.conf）中，添加如下配置：
server {
listen 80;
server_name localhost; # 你的域名或 IP
# 根目录指向你的 dist 文件夹路径
root /usr/share/nginx/html/dist;
index index.html index.htm;
location / {
# 核心配置：解决 History 路由 404 问题
# 尝试寻找请求的文件，如果找不到，就返回 index.html
try_files $uri $uri/ /index.html;
}
# 如果你在开发时配置了代理（proxy），在生产环境也需要用 Nginx 做反向代理解决跨域
location /api/ {
proxy_pass http://backend-server-ip:8080/; # 后端接口的真实地址
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
配置完成后，重启 Nginx 即可：nginx -s reload。
4. 部署方案二：现代前端 Vercel / Netlify 自动化部署
如果你是做个人项目、开源项目，或者公司采用了现代化的 DevOps 流程，强烈推荐使用 Vercel 或 Netlify。它们提供了免费、极简、自动化的部署体验。
4.1 什么是 Vercel？
Vercel 是一个云平台，专为前端框架和静态站点设计。你只需要把代码推送到 GitHub，Vercel 就会自动帮你拉取代码、执行 npm run build、并把产物发布到全球 CDN 上，还会自动为你配置 HTTPS 证书。
4.2 部署步骤
- 将代码推送到 GitHub：确保你的项目已经托管在 GitHub 上。
- 登录 Vercel：使用 GitHub 账号登录 Vercel 官网。
- 导入项目：点击 “Add New…” -> “Project”，选择你的 GitHub 仓库。
- 配置构建命令：Vercel 会自动识别出这是一个 Vite/Vue 项目，默认的构建命令
npm run build和输出目录dist通常不需要修改。 - 点击 Deploy：等待 1-2 分钟，Vercel 就会为你生成一个可访问的域名（如
my-admin-app.vercel.app）。
4.3 解决 Vercel 上的 History 路由 404 问题
和 Nginx 一样，Vercel 默认也不知道如何处理 History 路由。我们需要在项目根目录下新建一个 vercel.json 文件来配置重写规则：
{
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}
将这个文件提交到 GitHub，Vercel 会自动重新部署，404 问题就迎刃而解了。
5. 总结
至此，我们的 Vue 3 企业级后台管理系统实战之旅就画上了圆满的句号。
回顾整个系列，我们从最基础的 HTML/CSS/JS，一路打怪升级，掌握了工程化构建、Vue 3 核心语法、Vue Router 路由管理、Pinia 状态管理、Axios 网络请求封装、Element Plus 组件库实战，最终完成了包含动态路由和权限控制的后台系统，并成功将其部署上线。
前端技术日新月异，但万变不离其宗。掌握了这套核心的工程化思维和组件化开发模式，无论未来面对什么样的框架和业务需求，你都能游刃有余。继续保持对技术的热爱，去创造更多优秀的产品吧！