把Vue项目部署到服务器后，访问的核心动作是：构建产物并让Nginx指向它。你需要用npm run build生成dist目录，再把它上传到服务器，接着把Nginx的root指到dist目录，然后重启Nginx，就能通过域名或IP访问了，整个过程卡住，九成是路径或try_files配置出了差错。
部署前必须知道的vue项目构建产物逻辑
先别急着敲命令,得弄明白Vue项目部署到服务器以后怎么访问这件事的本质，我们在本地开发时，跑的是npm run serve或npm run dev，那是Webpack或Vite开发服务器实时编译的，服务器上跑的是纯静态文件，没有“编译”的概念。
打包和上传的具体操作
项目根目录下执行：
npm run build
执行完成后,项目目录里会多出一个dist文件夹，这个文件夹里是index.html、js/css目录和static目录等。dist就是你要上传的全部内容。
上传方式常见有这几种：
- 宝塔面板文件管理器：压缩
dist（注意压缩的是内部文件，不是dist这层壳），上传后解压到站点目录。 - SCP或SFTP工具：用WinSCP或FileZilla把整个
dist拖拽到服务器站点目录。 - 命令行rsync：
rsync -avz dist/ root@你的服务器IP:/www/wwwroot/你的站点目录/。
上传完成后,在浏览器里输入你的域名或IP，大概率会看到两种情况：要么白屏，要么Vue的路由直接404，这就是接下来要解决的Nginx配置问题。
vue项目部署nginx配置history模式方法
多数Vue项目默认开启history模式路由，也就是地址栏里没有号，这种模式对服务器有额外要求，Nginx必须做兜底配置，否则刷新子页面或者在子页面里F5一下，就直接404了。
核心的try_files配置
在Nginx网站配置文件的server { }块里，你需要加入这段调校之后的配置：
location / {
root /www/wwwroot/你的站点目录;
index index.html;
try_files $uri $uri/ /index.html;
}
这段配置的意思是：当用户访问/about时，Nginx先去服务器上找/about这个文件，找不到就去找/about这个目录，目录也不存在，就把请求转交给index.html，由Vue Router的history模式接管并渲染对应的路由组件。
少了try_files这一行，是绝大多数人遇到vue项目404页面如何解决这个问题的根源，加上这一行，刷新白屏问题就会消失。
解决静态资源路径404
很多人上传部署后,页面能打开，但CSS和JS全部404，这多半是publicPath配置不对。
Vue CLI构建的项目，在vue.config.js里设置：
module.exports = {
publicPath: './'
};
Vite项目的设置方式类似,在vite.config.js里：
export default {
base: './'
};
这里用相对路径,好处是无论你部署在域名根目录还是子目录（比如/admin），资源路径都能正确解析，如果你用的是纯静态托管（现在国内云厂商提供的对象存储和静态网站托管方案都支持），直接把dist拖到桶里，然后把index.html设为默认首页，404错误页面也指向index.html，也能达到类似效果。
部署后访问出现404的排查路径
部署完成后别急着欢呼，先用curl命令测一下。
常见的坑和对应处理
可能遇到的情况整理成了一个表格：
| 故障现象 | 原因 | 处理方式 |
|---|---|---|
| 访问IP能打开，域名打不开 | DNS未解析或云服务商未放行80端口 | 检查云服务商的网络安全组入方向规则，放行TCP 80端口 |
首页能开，/login等子路由404 |
Nginx缺try_files配置 |
在location /里补上try_files $uri $uri/ /index.html; |
| 页面能开，CSS样式全丢 | publicPath绝对路径不匹配 |
改为重新构建，或保证路径和实际部署目录层级吻合 |
| 部署后接口请求全部502 | 反向代理配置缺失 | 补下文的proxy_pass配置 |
反向代理和端口转发
Vue项目本身是静态资源,但页面需要向后端请求数据，如果你的后端是Spring Boot、Node.js跑在8080端口，Nginx需要这样转发：
location /api/ {
proxy_pass http://127.0.0.1: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;
}
如果你的前端用的是3000端口的Nuxt或者Vite的SSR模式,配置逻辑一样，只是proxy_pass的目标端口换成3000。
针对不同服务器的部署差异
这里有个信息得同步给正在用宝塔面板的朋友,很多运维同学在宝塔的软件商店里安装Nginx后，发现站点配置改不动，那是因为宝塔面板会用自己的配置结构覆盖部分内容，你需要在“网站-设置-配置文件”里修改，或者干脆放弃面板，直接用命令行的Nginx。
个人服务器部署场景下的路径规划
场景：买了个便宜的云服务器，没有备案域名。 这种情况下你只能通过http://公网IP:端口来访问，需要先把Nginx的默认80端口改成别的未占用端口，比如8080，再去云服务商的控制台防火墙里把8080加进放行名单，访问方式就是http://IP:8080。
场景：换服务器了，原本的Nginx配置全部丢光。 下次部署Vue项目时，先把配置文件的骨架搭出来，做个模板存着，不要每次从零开始，下面是区分不同产品线的服务器配置方案对比：
| 服务器环境 | 配置要点 | 注意事项 |
|---|---|---|
| 简米云、酷番云轻量服务器 | 预装Nginx或宝塔，选镜像市场里的“WordPress玩具环境”不如选“LNMP环境” | 面板模式要确认Nginx版本、PHP版本兼容性，有的镜像打包时就把Nginx的root指到了别的目录 |
| 酷番云EdgeOne、Cloudflare Pages | 属于边缘函数和静态托管的范畴，不适用Nginx配置，直接在控制台改托管服务规则即可 | 这类服务自带CDN，缓存失效要手动清理边缘节点缓存，否则改代码后线上还是旧的 |
| 企业自建机房 | 服务器上有多个站点，Nginx要在/etc/nginx/conf.d/目录下建不同域名解析的.conf文件 |
修改自己的.conf后重载Nginx：nginx -s reload，不会影响其它站点 |
部署系统镜像的选择也要留意,系统镜像自带的Nginx版本可能有差异，CentOS的提示可能是nginx -s reload，而有的Ubuntu镜像默认的Nginx编译参数和配置文件路径都不一样，所以命令执行报错时先检查配置文件路径，再看版本差异。
前端路由的重定向配置
项目里如果在router/index.js里写了：
const routes = [
{ path: '/', redirect: '/home' }
]
这种情况下,用户访问，Vue Router会帮它重定向到/home，部署到服务器后，如果/home这个路由刷新出404，问题不在你的代码逻辑，而在于你的Nginx兜底没生效，重新检查一下try_files这行配置是否真的写在生效的location /里，而不是写在了别的Server或者嵌套的Location里。
部署完成后验证访问的正确步骤
下面是能帮你在vue项目部署到服务器以后怎么访问这一环节里,快速验证问题是否解决的实操顺序：
- 确认Nginx服务状态：执行
nginx -t看配置语法是否有误，正确后执行nginx -s reload。 - 检查服务器防火墙：确认访问端口已放行，例如
firewall-cmd --list-ports（CentOS）或ufw status（Ubuntu），同时确认云服务商的安全组策略没有挡阻。 - 浏览器无痕模式访问域名：排除本地浏览器缓存的干扰。
- 看Nginx日志：路径通常在
/var/log/nginx/error.log，如果看到directory index of "/xxx/" is forbidden之类的错误，说明root路径指错了目录，或者index指令没配。
多数情况下走到这一步,问题已经解决，还有一部分人在部署完后，页面显示的是默认的Nginx欢迎页，而不是Vue页面，这属于Nginx的root指到了Nginx默认的HTML目录，并没有指向你上传的dist，去配置文件里把root的路径改成你实际的站点目录，问题立刻消失。
常见问题和排查速查
vue项目部署到服务器以后访问时出现404如何排查？
先分清是首页404还是路由刷新404,首页404通常是部署路径错误，检查Nginx的root指令是否指到了dist内容所在的目录，index index.html是否配置正确，路由刷新404是未配置try_files或配置未生效，补上后重载Nginx即可，如果是接口数据404，看接口路径和proxy_pass的location匹配关系，例如/api前缀的请求是否被正确转发给了后端端口。
部署后样式错乱，排版全崩了是什么原因？
这种情况大多是构建时publicPath用了绝对路径，导致HTML里引用的/js/app.xxx.js按域名根路径找资源，但你的项目其实部署在子目录里，排查办法是打开浏览器开发者工具，看Network面板里报404的资源路径，对比资源在服务器上的实际路径，就能看出路径差值，然后按上面提到的publicPath: './'重新构建即可，也可在Nginx里用alias指令做路径映射，业界最有治理经验的部署方案，就是把静态资源交给对象存储或CDN来托管，Nginx只负责转发请求，这样速度和容错都更好。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/784072.html
