Vue项目部署到tomcat，配置了404页面转到index.html，但是刷新页面后浏览器地址栏变为index.html

Question

问题描述

我的Vue项目需要部署到tomcat下，放在webapps下的一个名为mapedu的文件夹内，在VueRoute中所有的路由都加了mapedu前缀。也配置了/webapps/mapedu/WEB-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>

我的服务器的地址为http://cloud.abc.cn/。
部署完成之后访问http://cloud.abc.cn/mapedu这...，可以正常访问到前端项目。
但是当我在项目里进行过路由跳转，地址改变了之后，再刷新浏览器时，浏览器地址就会被改变成index.html。
比如项目中有一个路由是http://cloud.abc.cn/mapedu/da...。当我停在这个页面按F5刷新浏览器时，浏览器地址就被改变成http://cloud.abc.cn/mapedu/in...，这个路由我的Vue项目不认识，所以就跳了Vue项目中的404页面。

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

//在浏览器输入http://cloud.abc.cn/mapedu可以正常访问到首页
//在页面中点击功能进行操作后到了http://cloud.abc.cn/mapedu/data/query这个路由
//刷新之前的浏览器地址栏
http://cloud.abc.cn/mapedu/data/query

//刷新之后的浏览器地址栏
http://cloud.abc.cn/mapedu/index.html

你期待的结果是什么？实际看到的错误信息又是什么？

刷新之后不要改变地址栏的路径，以便可以正常路由到前端页面

Answer 1

尝试下<location>/index.html</location>改为<location>/</location>
推荐前后端分离前端不要用tomcat，服务器相关的功能太少， 用nginx或apache在tomcat前面再加一层会舒服很多..

Answer 2

写个controller，定义

@GetMapping({"/mapedu/","/mapedu/*"}) 
public String toVueIndex() {
return "mapedu/index.html"; // 指向VUE的HTML文件。
}