众所周知，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
