vue部署至Tomcat，F5刷新报404问题解决

  我做的是一个移动端项目，使用的是 Vue + app 包壳的方式。在 PC 端测试时发现 F5 刷新直接报 404 问题，虽然在移动端包壳后不会有刷新的功能，但是强迫症搞怪，用着真是难受，必须给它搞定，所以就有了本篇文章。

Vue 部署至 Tomcat 会遇到的问题汇总：

1.在将vue项目部署至tomcat后，js、css、img、index.html等文件，都有被缓存的可能。
 
 解决js、css、img 缓存问题：可以使用时间戳的方式  参考：Vue项目部署，解决js、css、img被缓存问题

2.解决index.html入口文件，可以使用Filter过滤器的方式解决
  1中，解决的只是index.html 中引入的js、css、img 等文件的缓存。但是 index.html 这个文件也可能会缓存。网上很多说：解决index.html 都是Nginx。目前博主使用的是Tomcat。网上很难找到 Tomcat，使用 Filter 的方式是博主自己研究出来的方式，目前已线上运行1年，没法现任何问题。
 
 参考：vue部署至tomcat，解决index.html被缓存的问题

第3个问题解决方案，就是本文要讲的，解决起来也很简单。

3.vue部署至Tomcat，F5刷新报404问题
  解决方案：进入项目部署的路径下，创建一个 WEB-INF 文件夹，在文件夹中 创建一个 web.xml 文件，在 web.xml 中配置如下内容即可。

配置信息如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app 
	xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
	version="3.1"
	metadata-complete="true">
    <display-name>Router for Tomcat</display-name>
    <error-page>
        <error-code>404</error-code>
        <location>/</location>
    </error-page>
</web-app>

注意：
  我们每个人的 Tomcat 项目部署地址可能有所不同，一般是在 apache-tomcat-版本号/webapps 目录下，我对 tomcat 目录进行了一些简单的配置，并写了一些启动脚本，所以我的项目部署的文件夹是在 webapp/web 目录下，所以 新加的 WEB-INF/web.xml 也是在 webapp/web目录下

---

博主写作不易，加个关注呗

求关注、求点赞，加个关注不迷路 ヾ(◍°∇°◍)ﾉﾞ

我不能保证所写的内容都正确，但是可以保证不复制、不粘贴。保证每一句话、每一行代码都是亲手敲过的，错误也请指出，望轻喷 Thanks♪(･ω･)ﾉ