Nginx服务部署 Vue 项目后刷新页面,出现 404 问题

本文最后更新于:2023年4月28日 下午

环境

1.vue-cli 3.x
2.Nginx

项目之前vue-router使用默认‘hash’模式,在本地与部署线上环境后都没有问题,因为要去掉URL中的 ‘#’ 号,故使用‘history’路由模式,故再次部署线上环境后,首页能正常访问,菜单内点击切换也没有问题,但当你刷新页面后,则出现 404 Not Found,故在此记录一下解决办法

解决思路

刷新页面时访问的资源在服务端找不到,因为此时vue-router设置路由地址被当作url地址,此时的地址路径肯定不是真实存在的,所以出现404现象。

Nginx服务部署Vue项目后刷新页面,出现404问题

之所以出现上面的现象,是因为在nginx配置的根目录/www/wwwroot/ssoShuang/dist下面压根没有’Menu/index’这个真实资源存在,这些访问资源都是在js里渲染的。
服务端nginx的一开始配置如下(假设域名为:testwx.wangshibo.com):

server
{
    listen 80;
    server_name testwx.wangshibo.com;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/ssoShuang/dist;
}

如上出现404的原因是由于在这个域名根目录/www/wwwroot/ssoShuang/dist下面压根就没有’Menu/index’这个真实目录存在。

解决问题

在服务端nginx配置里添加vue-route的跳转设置(这里首页是index.html,如果是index.php就在下面对应位置替换),正确配置如下:

server
{
    listen 80;
    server_name testwx.wangshibo.com;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/ssoShuang/dist;

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

References


Nginx服务部署 Vue 项目后刷新页面,出现 404 问题
https://baymax55.github.io/2023/04/28/vue/Nginx 服务部署 Vue 项目后刷新页面,出现 404 问题/
作者
baymax55
发布于
2023年4月28日
许可协议