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


废话不多说直接进入主题

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

解决方案来了

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

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


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的问题了