Vue项目打包部署全流程详解

最近公司新开发了一个后台管理系统，前端用的是 Vue，开发完总得上线让同事用吧。可别小看打包部署这一步，搞不好页面打不开、资源加载失败，半夜还得被叫起来修bug。

在项目根目录下执行这条命令：

npm run build

等一会儿，控制台提示打包完成，这时候会生成一个 dist 文件夹，里面就是所有静态资源：HTML、CSS、JS、图片，全是浏览器能直接认识的文件。

很多人打包完一丢到服务器，打开首页是白屏，F12一看全是404。原因多半出在路径上。

打开 vue.config.js（没有就新建），设置好 publicPath：

module.exports = {
  publicPath: './'  // 相对路径，适合放到子目录
}

如果你要部署在根路径，比如 https://yourdomain.com/，那可以写成 '/'；但如果是放在二级目录，比如 https://yourdomain.com/admin/，那就得改成 /admin/，不然资源请求地址全错。

打包好的 dist 文件夹，可以通过 scp、FTP 或者 rsync 传到服务器对应位置。比如我常用这句：

scp -r dist/* user@server:/var/www/html/admin/

传完之后，确保 Nginx 或 Apache 已经指向这个目录。

Vue 走的是前端路由，用户访问 /list 并不是真有这个文件夹，而是靠 JS 拦截处理。所以 Nginx 得配置成：找不到文件时返回 index.html。

在 server 块里加这么一段：

location / {
    root   /var/www/html/admin;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

这样不管用户刷多少次页面，都能正确加载应用。

更新版本后，用户可能还卡在旧的 JS 文件里，界面不对劲。解决办法是在构建时让文件名带上 hash：

module.exports = {
  outputDir: 'dist',
  assetsDir: 'static',
  filenameHashing: true  // 默认开启，确保每次构建文件名不同
}

这样一来，改过代码后文件名自动变，浏览器就会重新下载，不会用旧缓存。

部署完别急着收工，打开浏览器模拟手机、换无痕模式多点几个页面。看看控制台有没有报错，网络面板里 JS 和 CSS 是不是都正常加载了。特别是登录跳转、接口请求这些关键路径，必须亲自走一遍。

有一次我把 publicPath 写成了 /，结果放到测试环境的子目录下，所有资源请求都跑到了根路径，整整排查了一小时。现在我都养成习惯，打包前先看一眼部署环境再决定怎么配。

Vue项目打包部署实战：从本地到服务器的完整流程