前端vue项目部署到tomcat，一刷新报错404解决方法

公司前端写的后台部署到tomcat
webapps目录下后，无法进行刷新，一刷新就会报错404，自动跳的404页面。在网上查了下，官方说是HTML5 History
模式引发的问题，但是解决方案中，并没有tomcat的解决方案。如链接：https://router.vuejs.org/zh-cn/essentials/history-mode.html

废话不多说直接进入主题

• 我使用的是Vue4.X
  当运行命令npm run build 后 会产生一下如图所示的文件
  
  
  然后直接将图片一中的dist 文件夹进行压缩打包上传到服务器中的webapps 目录下 如右图所示
  
  此时项目已经部署完成可以通过浏览器进行访问了，但是你会发现子路由以刷新就会包404的错误
  **

解决方案来了

在 dist 文件夹中创建一个 WEB-INF的文件夹 并在该文件夹中创建一个web.xml 如图所示:

web.xml 内容

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee/web-app_2_5.xsd"
 id="scplatform" version="2.5">
 <display-name>/</display-name><!--/webName/-->
 <error-page>
 <error-code>404</error-code>
 <location>/index.html</location>
 </error-page>
</web-app>

OK 这样就完美的解决了刷新404的问题了