Nginx解决VUE的history模式下刷新404报错

众所周知，vue的路由模式如果使用history，刷新会报404错误。官方给出了几种解决方式如下：

image.png

但是其实这官方的demo是有一些需要注意的地方的，网上很多其他人的解决方式都是有坑。
1、之所以写这篇教程，是我们的项目使用到了history模式，报404后。由于我们的项目是放到了Tomcat中，所以选择了网上最简单的一种解决方式，直接在Tomcat中的web.xml中加入以下内容解决：

<error-page>    
    <error-code>404</error-code>    
    <location>/</location>    
</error-page> 

image.png

这个方式有一个弊端，虽然可以解决404的显示问题，但是这个404会被浏览器捕获到，这就造成一个坑，如果你的WEB项目是在微信中打开的，微信捕获到404后，就会重定向到公益页面，就造成了刷新，直接跳到了公益页面。所以后来我们用了nginx解决。

2、使用nginx，刷新404，在nginx捕获，返回到 index.html 页面，这个页面就是你 app 依赖的页面。
这里必须注意，nginx的配置与前端代码中静态资源打包方式有关联。这里先解释一下我的项目路径等等。
2.1、项目打包后目录：wap

image.png

2.2、部署目录：/root/server/vue

image.png

2.3、assetsPublicPath打包方式为绝对路径

image.png

3、具体Nginx配置
我们的项目URL是：http://fat2.test.cn/wap
在/etc/nginx/conf.d目录下，新建一个fat2.test.cn.conf的配置文件，内容如下：

server {
    listen       80;         #监听的端口
    server_name  fat2.test.cn;    #监听的URL

    location / {
      root /root/server/vue/wap/;             #项目路径
      index /index.html;                        
      try_files $uri $uri/ /index.html;        #匹配不到任何静态资源，跳到同一个index.html
    }
    
    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

如果出现以下错误，那么肯定是nginx配置与代码静态资源打包方式不匹配

image.png