vue 使用了浏览器的刷新之后报错_Vue项目部署到tomcat，配置了404页面转到index.html，但是刷新页面后浏览器地址栏变为index.html...

问题描述

我的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" metacomplete="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

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

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