vue-route+webpack部署单页路由项目，访问刷新出现404问题

2022-03-11

问题描述：

前端同事使用了Vue.js框架，结合vue-route编写了一个单页路由项目，并协助运维配置了服务器端的nginx。部署完成后，访问首页没有问题，从首页打开二级页面也没有问题，但是在所有二级页面打开后，再次刷新，就会出现404现象！如下：

问题原因：

页面刷新时访问的资源在服务器上找不到，因为vue-设置的路径不是真实路径。

上面的404现象是因为nginx配置的根目录/Data/app//dist下没有真正的资源，这些访问资源都是用js渲染的。

服务器nginx的初始配置如下（假设域名为：）：

上面之所以出现404，是因为域名根目录/Data/app//dist下根本没有真正的目录。

问题解决了：

在nginx配置中添加vue-route的跳转设置（这里首页是index.html，如果是index.php，在下面对应位置替换），正确配置如下：

[root@test-huanqiu ~]# cat /Data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf
         server {
         listen 80;
         server_name testwx.wangshibo.com;
         root /Data/app/xqsj_wx/dist;
         index index.html;
         access_log /var/log/testwx.log main;
         location / {
             try_files $uri $uri/ @router;
             index index.html;
         }
        location @router {
            rewrite ^.*$ /index.html last;
        }
}

重启nginx后，问题解决。