VUE项目部署Tomcat页面刷新404问题解决方法

问题描述

 

vue项目在本地开发环境运行正常，打包部署至线上Tomcat服务后，不刷新浏览器时工作正常，一刷新浏览器就报404错误，错误截图如下：

错误描述：404，源服务器未能找到目标资源的表示或者是不愿公开一个已经存在的资源表示。

之前在本地IDEA环境测试正常，且该页面之前从菜单链接访问都是正常，一刷新浏览器就404。

问题解决

经过多方排查和查找资料，问题应该是server端未配置默认访问的文件路径有关。通过在项目下新增WEB-INF/web.xml文件，并配置项目默认的404错误页面访问路径即可解决该部署问题。 

1、在tomcat的webapps目录对应项目目录下新增WEB-INF文件，并在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.0" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
  <error-page>
  <error-code>404</error-code>
  <location>/index.html</location>
  </error-page>
</web-app>

2、配置完成，重启tomcat，问题解决。