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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue-route+webpack部署单页路由项目，访问刷新出现404问题，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1607字，纯文字阅读大概需要3分钟。

内容图文

问题描述：

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

 

问题原因：
刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。
如上的404现象，是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在，这些访问资源都是在js里渲染的。

服务端nginx的一开始配置如下（假设域名为：testwx.wangshibo.com）：
[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;

}

如上出现404的原因是由于在这个域名根目录/Data/app/xqsj_wx/dist下面压根就没有loading这个真实目录存在。

问题解决：
在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后，问题就迎刃而解了。

[总结：nginx配置文件里一定要定义access和error日志，出现问题要第一时间查看日志(error)]

内容总结

以上是互联网集市为您收集整理的vue-route+webpack部署单页路由项目，访问刷新出现404问题全部内容，希望文章能够帮你解决vue-route+webpack部署单页路由项目，访问刷新出现404问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---