把Vue项目部署到云服务器上去，核心思路就三步：本地构建打包、服务器环境配置、Nginx反向代理托管静态文件。无论你是第一次买服务器还是已经折腾过几回，这篇文章按实际操作的先后顺序来写，照着做就能跑通。
部署前先搞懂Vue项目部署的本质
很多人一上来就搜“vue项目部署到服务器”，其实得先明白一件事：Vue打包后只是一堆静态文件（HTML、CSS、JS），不需要Node运行环境，只需要一个能托管静态文件的Web服务器，这也是为什么Nginx成为最常见的部署方案。
本地构建：npm run build到底做了什么
开发时你跑的是npm run serve，这起的是开发服务器，带热更新，但性能差，部署要用生产构建，命令一般是：
npm run build
执行后项目根目录会出现一个dist文件夹，里面就是所有要上传的文件，如果构建失败，先检查有没有报错信息，最常见的是语法错误或者依赖缺失。
确认打包产物路径
Vue CLI项目默认输出到dist，Vite默认也是dist，如果你想改路径，在vue.config.js里加publicPath配置，Vite则在vite.config.js里改base，用默认值就行，不用动。
云服务器选型和基本设置
这里涉及常见的价格因素,国内主流云厂商轻量应用服务器，入门配置1核2G内存，价格大概在每年几十到一百多元，带宽按量或固定带宽可选，个人学习或小项目完全够用，如果是面向正式用户，建议2核4G起步。
操作系统选哪个
推荐选Ubuntu 22.04 LTS或CentOS 7/8，但CentOS官方停止维护后，新用户建议直接Ubuntu，系统装好后，用SSH连上去，Windows用户用终端或Xshell，macOS/Linux直接终端。
安全组和防火墙放行端口
云服务商控制台里的“安全组”或“防火墙”规则，默认只开放22端口（SSH），你要放行：
- 80端口（HTTP）
- 443端口
（HTTPS，如果用域名证书）
- 其他端口按需添加
不放行80端口,外网永远访问不到你的Nginx页面，这是新手最容易踩的坑。
服务器上安装Nginx并配置
这里写Ubuntu下的命令,CentOS用户把apt换成yum即可。
安装Nginx
sudo apt update sudo apt install nginx -y
装完后启动并设置开机自启：
sudo systemctl start nginx sudo systemctl enable nginx
此时在浏览器输入服务器公网IP,如果看到Nginx欢迎页，说明Web服务已经跑起来了。
上传dist文件夹到服务器
推荐用scp命令，在本地项目目录执行：
scp -r ./dist root@你的服务器IP:/var/www/
如果使用密钥登录,加-i 密钥文件路径，也可以用FileZilla等图形化工具，直接拖拽上传，效果一样。
修改Nginx配置指向dist目录
Nginx的默认站点配置文件在/etc/nginx/sites-available/default（Ubuntu）或/etc/nginx/conf.d/default.conf（CentOS），编辑它，把root指向你上传的dist路径：
server {
listen 80;
server_name your-domain.com; # 没有域名就填服务器IP
root /var/www/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}这一段最关键的是try_files $uri $uri/ /index.html;。Vue是单页应用，前端路由靠History模式管理，刷新子路由时如果找不到对应文件，必须回退到index.html，否则页面会404。
改完保存,检查配置并重启：
sudo nginx -t sudo systemctl reload nginx
处理接口跨域问题
如果你的Vue项目里请求的是/api接口，而后端服务跑在另一个端口（比如8080），需要在Nginx里加反向代理，在server块里加：
location /api/ {
proxy_pass http://127.0.0.1:8080/;
}这样前端请求/api/user就会转发到后端的/user
，同时解决了跨域，注意proxy_pass结尾的斜杠有没有，有和没有代理的路径拼接规则不同，实操时容易出错。
用域名和HTTPS让项目更专业
只通过IP访问能用,但如果你打算给别人用或者上线，绑定域名是必要的，国内服务器绑定域名还有一个现实要求：域名必须先完成ICP备案，否则80端口会被拦截，这是国内云服务器的常见限制，如果你买的是中国香港或海外服务器，则不需要备案。
域名解析到服务器
在DNS服务商后台,加一条A记录，把域名指向你的服务器IP，解析生效后，把Nginx配置里的server_name改成你的域名，然后sudo systemctl reload nginx。
配置免费的HTTPS证书
现在浏览器对HTTP网站越来越不友好,用Let’s Encrypt或者简米云/酷番云的免费证书都行，以certbot为例，一行命令搞定：
sudo apt install certbot python3-certbot-nginx -y sudo certbot --nginx -d your-domain.com
按提示操作,certbot会自动修改Nginx配置并启用HTTPS，证书有效期90天，记得用sudo certbot renew设置定时续期任务。
部署完成后怎么验证是否成功
上传配置完,不要在浏览器里草率看一眼首页就完事，按下面的清单逐项验证：
- 在浏览器访问域名或IP，页面正常加载
- 手动刷新子路由页面（比如
/about），没有404 - 打开浏览器开发者工具,Network面板里没有红色报错
- 如果配置了
/api代理，登录或数据请求能正常返回 - 在手机上用流量访问,确认没有局域网限制导致的误判
一个常见的坑：打包路径导致静态资源404
如果你部署后发现页面白了,但HTML能打开，打开控制台看到js/css文件都返回404，多半是打包时的publicPath写成了绝对路径，Vue CLI项目在vue.config.js里设置：
module.exports = {
publicPath: './'
}
Vite项目则在vite.config.js里设置：
export default {
base: './'
}
改成相对路径,静态资源就能正常加载。
更新迭代部署的两种方式
项目上线后不可能不更新,每次改完代码，重新npm run build，把新的dist覆盖到服务器/var/www/dist，推荐用两种方式：
手动覆盖，简单直接
本地重新构建,然后重新scp上传，缺点是如果网络中断可能导致目录不完整，但个人项目足够。
用Git钩子或CI/CD自动部署
在服务器上用Git拉取代码,然后本地服务器执行构建，再把产物放到网站目录，或者用Jenkins、GitHub Actions，提交代码后自动部署，这适合团队项目，但配置成本高，不是必需。
常见问题解答
部署Vue项目需要买多大配置的云服务器？
个人博客、后台管理系统等中小型项目，1核2G配置足够日常使用，即使有数据库和Nginx也能跑稳，用户量大、并发高再考虑升级到2核4G，带宽方面，普通图文项目2M-5M足够，有视频或大量图片就选按带宽计费。
Vue项目一定要用Nginx吗，用Node启服务行不行？
可以,把dist当成静态目录，用node写个静态服务脚本也能跑，但生产环境不推荐，Node服务没有Nginx成熟的安全防护、静态文件处理效率也低，行业共识认为，Nginx是目前前端静态文件部署的首选方案，尤其适合单页应用的路由配置。
为什么我的Vue项目在服务器上刷新页面就404？
因为Vue Router默认使用HTML5 History模式，刷新的路径在服务器上找不到真实文件，解决办法就是在Nginx的location /里加try_files $uri $uri/ /index.html;，让所有路径回退到入口页面，如果不想配置，也可以改成Hash模式，URL里会出现，不美观但能避免这个问题。
把构建产物和反向代理这两件事理顺,Vue项目上云就是重复执行同一套流程，先从最简IP加Nginx跑通，再逐步加域名、加HTTPS，稳扎稳打就能把项目正式挂到线上。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/708080.html
