vue-router部署到nginx，刷新出现404现象（nginx下部署多个vue）

vue-router部署到nginx，访问首页没问题，从首页里跳转其他页面也没问题，但是非首页的其他页面，再次刷新，就会出现404现象。（本地正常）

配置如下图：

由于nginx下需要配置多个vue工程，所以需要重定向，使得访问路径为 ip:port/project/

但是直接在地址栏访问  ip:port/project/upload 出现404，程序内部跳转则正常，这是因为vue-router设置的路径不是真实存在的路径。如上的404现象，是因为在nginx配置的根目录下面压根没有upload页面这个真实资源存在。(真实页面只有index.html)

解决方法

方法1、网上一般都是说将nginx的配置改为下图这样，可是我试了没用，可能是因为我在nginx下配了多个工程吧，只配一个工程的，可以试试这个

 server {
         listen 9090;

         server_name 10.2.10.130;
         root /home/dist/ngixn;
         index index.html;

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

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

}
 

方法2、在nginx的server里加上此段配置，有多个vue工程则每个都配一个。若不配的话页面也能打开，只是二级页面刷新会404

server {
         listen 9090;

         server_name 10.2.10.130;
         root /home/dist/ngixn;
         index index.html;

         location /project {
             try_files $uri $uri/ /project/index.html;
         }

}

个人理解：$uri表示访问的页面，$uri/表示配置的根路径，如果路径下没有，则跳转到根路径下的/project/index.html

 

相关参考：

vue多项目nginx配置：https://blog.csdn.net/echo008/article/details/77098142/

vue-route二级页面打开后，404解决方法：https://blog.csdn.net/qq_22585453/article/details/82288701

try_files的意思：http://blog.sina.com.cn/s/blog_bd418dfa0102wser.html