知识库 2025年09月09日 👤 mdo 👁 14 阅读

Vue打包部署Nginx后页面路径刷新404的问题

404的原因

浏览器访问的路径URL在Vue打包的项目资源路径中是不存在的,因为Vue的路由存在于vue-router的js中,并不是真实的URL

解决方式 ​

Nginx中添加以下代码

shell

server {
 listen 80;
 server_name localhost;
 ...
 #vue-router配置
 location / {
 try_files $uri $uri/ @router;
 index index.html;
 }
 location @router {
 rewrite ^.*$ /index.html last;
 }
}

谨记 修改配置后请重载Nginx

shell

nginx -s reload
标签: # 打包# 部署