解决 nginx部署多个vue项目刷新、访问路由页面404

问题

使用nginx 部署vue项目的时候 当我们刷新页面的时候，或者访问路由配置页面的时候会直接提示404！

分析

这个问题不是BUG，而是因为通常我们做的vue项目属于单页面开发。所以只有index.html；
解决这个问题也很简单。只需要将访问重定向到 index.html这个页面，交由 index.html 去处理对应的路由跳转就好。
刷新页面时访问的资源在服务端找不到，由于vue-router设置的路径不是真实存在的路径。
如上的404现象，是由于在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在，这些访问资源都是在js里渲染的。

解决

在nginx配置里添加vue-route的跳转设置（这里首页是index.html，若是index.php就在下面对应位置替换），正确配置以下（添加下面标红内容）：

方法1:

只限于配置一个项目
[root@test-huanqiu ~]# cat /home/soft/nginx/conf/default.conf

server {
    listen       80;
   server_name  localhost; #这里可以直接添加IP
	location / {
	         root /home/soft/nginx/html/dist; #dist为打包后的文件
             try_files $uri $uri/ @router;  #
             index index.html;
        }
    #路由配置信息 （解决页面刷新404问题）
	location @router {
            rewrite ^.*$ /index.html last;
        }
		}

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

方法2:

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

server {
    listen       80;
    server_name  localhost;
    location /dist1 {
        #如果是docker部署，一定要配置容器里面挂载的目录；
        alias   /usr/share/nginx/html/dist1; 
        #项目存放地址里边包含static、index.html；就是前端打包的dist文件；
        index  index.html index.htm;
        try_files $uri $uri/ /dist1/index.html; #解决页面刷新404问题
    }
    location /dist2 {
        alias   /usr/share/nginx/html/dist2;
        index  index.html index.htm;
        try_files $uri $uri/ /dist2/index.html; #解决页面刷新404问题
    }
    location /dist3 {
        alias   /usr/share/nginx/html/dist3;
        index  index.html index.htm;
        try_files $uri $uri/ /dist3/index.html; #解决页面刷新404问题
    }
    location /dist4 {
        alias   /usr/share/nginx/html/dist4;
        index  index.html index.htm;
        try_files $uri $uri/ /dist4/index.html; #解决页面刷新404问题
    }
    }

个人理解：$uri表示访问的页面 $uri/表示配置的根路径，若是路径下没有，则跳转到根路径下的/project/index.html
希望可以帮助到大家，欢迎大家留言交流，一起共同学习！