Vue 打包放Tomcat 页面刷新报404

问题描述

vue history模式打包放到tomcat后访问成功,正常点击跳转都正常，但是刷新该页面后报404错误。

问题原因

其主要原因就是history模式导致的, 具体可以看下官方解释
History 模式官方解释

官方解释

解决方法

看上图, 官方给的解决方案原理：要在服务端增加一个覆盖所有情况的候选资源，如果url匹配不到任何静态资源，则返回同一个index.html页面，这个页面就是app依赖的页面。

所以在tomcat服务器下操作： 在打包好的项目根目录(和index.html同一级)下新建一个WEP-INF文件夹， WEP-INF文件夹中新建一个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>/index.html</location>
</error-page>
</web-app>

这里要留意下, 一定是同级目录

同级目录

WEB-INF Git下载地址