把Vue项目部署到服务器上，核心就是本地执行构建命令生成静态文件，然后上传到服务器，再配置好Nginx指向对应的目录，同时处理好路由和接口代理。下面直接按完整流程走一遍，你照着做基本不会卡壳。
vue项目部署到服务器步骤详细解析
部署Vue项目并不需要你懂运维的所有细节,但几个关键步骤必须清楚，整个流程可以用一句话概括：本地打包，服务器解包，Nginx指路，接下来拆开讲。
第一步：本地打包生成dist目录
在你本地的Vue项目根目录下,打开终端，执行安装依赖和构建命令。
npm install npm run build
执行完以后,项目根目录下会多出一个dist文件夹，里面就是打包好的静态资源，包括index.html、js和css等文件，这个dist就是你要扔到服务器上的东西。
如果用的脚手架是Vue CLI，那么打包命令是npm run build；如果用的Vite，打包命令也是npm run build，但生产环境可能需要调整base路径，这里有一个隐藏细节：如果你的项目资源路径是绝对路径，部署到子目录就会白屏，所以需要确认vue.config.js或vite.config.js中的publicPath / base设置，多数情况下，部署在域名根目录时，用默认配置没问题。
第二步：准备服务器环境
你需要一台能通过公网访问的服务器,国内常见的酷番云、简米云都有轻量应用服务器，如果你只是学习或者跑小项目，最低配置的实例在近年来的价格里已经足够，选择操作系统时，推荐用Ubuntu或者CentOS，因为网上能找到的教程最多。
登录服务器后,先更新软件包，然后安装Nginx。
sudo apt update sudo apt install nginx
或者CentOS：
sudo yum install nginx
安装完成后,启动Nginx并设置开机自启。
sudo systemctl start nginx sudo systemctl enable nginx
此时打开你的服务器公网IP,如果看到Nginx默认欢迎页，说明环境就绪。
第三步：上传dist目录到服务器
上传静态文件有很多种方式,给两个最常见的。
使用scp命令（适合Mac/Linux/Git Bash）
如果你本地是Windows自带的PowerShell,也可以用scp，但路径格式要稍微注意，命令格式如下：
scp -r dist/ root@你的服务器IP:/var/www/html/
这里假设你已经配置了SSH密钥,没有的话会提示输入密码。/var/www/html是Nginx默认的站点根目录，当然你也可以放到其他路径，比如
/home/www/myproject，后面在Nginx配置里修改root路径即可。
使用FTP/SFTP工具
如果你习惯图形化操作,可以用FileZilla或者WinSCP，连接上服务器后，直接把dist里面的文件拖到目标目录，注意，是拖文件夹里面的内容，不是整个文件夹，否则Nginx指向时要多写一层路径。
上传好之后,可以先在服务器上执行ls /var/www/html看看文件是否齐全，确认有index.html和js/css目录。
第四步：配置Nginx指向dist目录
Nginx配置文件通常位于/etc/nginx/sites-available/default（Ubuntu）或者/etc/nginx/conf.d/default.conf（CentOS），你也可以新建一个独立配置文件，比如myvue.conf，然后软链接到sites-enabled。
最小配置示例：
server {
listen 80;
server_name yourdomain.com; # 换成你的域名或公网IP
root /var/www/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
这里的核心是try_files $uri $uri/ /index.html，它解决了刷新页面404的问题，因为Vue是单页应用，路由切换都在前端完成，如果后端找不到对应的真实文件路径，就让它回退到index.html，由前端路由接管。
改完配置后,检查语法并重载Nginx。
sudo nginx -t sudo systemctl reload nginx
现在访问你的域名或IP,应该能看到Vue项目的主页。
vue打包后部署nginx配置要点
部署过程中,多数人会卡在Nginx配置上，这里针对几个高频场景给出具体配置。
解决history路由模式下的404问题
如果你的Vue路由使用了mode: 'history'（也就是URL里没有），那么用户访问/about并直接刷新时，Nginx会去磁盘上找/about这个文件，找不到就返回404，上面那句try_files就是干这个用的。
行业共识认为,只要使用history模式，就必须加上这句try_files，如果你用的是hash模式（URL里有），则不需要这个配置，但实际项目中很多团队还是会优先用history，因为它看起来清爽。
配置反向代理处理接口请求
Vue项目通常需要调用后端接口,如果前端请求的是/api/xxx，而后端实际运行在http://localhost:8080，你可以在Nginx配置里加一个location /api的代理。
location /api {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
这样前端代码里的axios请求地址直接写
/api即可，不用关心后端公网域名，这里要注意proxy_pass后面的有没有，带不带会改变路径拼接方式，建议你测试时多试两种写法。
处理白屏问题和静态资源路径
打包完成后,你把dist文件上传到服务器，结果访问是白屏，控制台报错说加载不到js或者css文件，这大概率是静态资源路径问题。
Vue CLI项目检查vue.config.js里的publicPath，Vite项目检查base，如果你希望部署在子目录，比如http://yourdomain.com/blog/，那么需要改成相对路径：
// vue.config.js
module.exports = {
publicPath: './'
}
或者Vite：
// vite.config.js
export default {
base: './'
}
改完以后重新npm run build，再上传dist，这样index.html里引用的资源路径就变成了相对路径，放到哪个子目录都不会白屏。
vue项目部署到常见问题和排查方法
很多人在部署后遇到各种奇怪现象,这里把最常见的几个挑出来，给出排查顺序。
为什么刷新后404
如果你配置了try_files还是404，检查一下root路径是否写错，打开/etc/nginx/sites-available下的配置文件，确认root指向的目录里确实存在index.html，不要在root后多加一层路径，比如root /var/www/html;而不是root /var/www/html/dist;，除非你的dist文件直接放在html的子目录里。
为什么白屏但控制台没有报错
白屏且无报错,先看HTML源码里script标签的src，如果src是/static/js/main.js，而你的站点部署在子目录，那肯定是找不到资源，解决办法就是上面说的设置publicPath或base为。
如何防止浏览器缓存旧版本
每次发版后,用户打开页面可能还是旧版，传统方案是在打包时给文件名加入hash，Vue CLI和Vite默认就会生成带hash的文件名，如main.2f3a4b.js，但index.html本身可能被缓存，所以Nginx端可以对index.html设置不缓存。
location = /index.html {
add_header Cache-Control "no-cache, no-store, must-revalidate";
}
这样每次访问都会重新校验index.html，而带hash的静态资源可以设置长缓存，提高加载速度。
部署过程中的环境变量与性能优化
部署不只是把文件放上去,还要考虑不同环境下的接口地址和传输效率。
区分开发环境和生产环境接口地址
在Vue项目里,你可以在根目录创建
.env.development和.env.production两个文件。
# .env.production VUE_APP_API_URL=https://your-api-server.com
代码中通过process.env.VUE_APP_API_URL来读取，这样本地开发时走/api代理，生产环境使用了配置的完整地址，打包时，Vue会自动加载对应的环境变量。
开启gzip压缩加快访问速度
Nginx开启gzip非常简单,在配置文件server块里加入：
gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss image/svg+xml; gzip_min_length 1024;
开启后,浏览器加载的js和css体积会小很多，实测当中，大部分Vue项目的首包能减少一半左右。
如果你做事精细,还可以在Nginx里加入location /assets的缓存配置，但这不是必须，先跑通上面几个步骤再说。
Q&A：vue项目部署到服务器后常见疑问
问：vue项目部署到服务器后刷新404，除了Nginx还有别的原因吗？
答：如果Nginx配置已经写了try_files，刷新仍然404，检查你用的是不是error_page配置造成的干扰，或者server_name没有匹配上当前域名，建议在服务器上执行curl -I yourdomain.com/about，看看返回状态码，如果Nginx层面没问题，那就是后端接口位置不对，跟前端路由无关。
问：vue项目部署到服务器用什么系统更好？
答：对于Vue这种纯静态项目，操作系统影响不大，Ubuntu和CentOS在Nginx配置上略有差异，但都能完成任务，如果你同时需要部署Node.js后端，可以考虑Ubuntu，因为社区的LNMP教程更丰富，服务器价格方面，轻量应用服务器性价比更高，你可以根据实际项目规模选择2核4G或4核8G，够用就好。
问：github pages和服务器部署有什么区别？
答：GitHub Pages只能托管纯静态文件，不能自定义Nginx反向代理，也不能处理history路由的回退（可以加404页hack，但不够灵活），自己的服务器则能自由配置路由回退、接口代理、缓存策略等，适合正式项目，如果你只是放演示项目，GitHub Pages够用；如果有后端API或者自定义域名需求，服务器部署是常规操作。
部署Vue项目这件事,熟练之后十分钟就能完成，核心就是记住构建、上传、配置Nginx三步，遇到问题先从index.html能不能访问、静态资源路径对不对、Nginx配置语法有没有错三个方向排查，你不需要记住所有细节，但一定要理解try_files和publicPath这两个关键点，因为它们能解决绝大多数部署事故。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/721293.html
