vue-router+webpack部署nginx刷新404问题与解决方案

1.问题：

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

 

2.原因：

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

3.解决方案

在nginx配置里添加vue-route的跳转设置，正确配置如下：

 server {
        listen       8090;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
             try_files $uri $uri/ @router;
             index index.html;
         }

        location @router {
            rewrite ^.*$ /index.html last;
        }
}

原文 https://www.jianshu.com/p/02ad1f919471