Vue页面刷新时出现404问题 空白问题
原因
HTML5 History 模式引发的问题,具体为什么,Vue官方已经给出了解释,根据官方给出的解决方案原理,要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是 app 依赖的页面。详情https://router.vuejs.org/zh/guide/essentials/history-mode.html
解决办法
-
在tomcat服务器下的打包好的web项目根目录下新建一个WEB-INF文件夹
-
在WEB-INF中写一个web.xml文件
-
在web.xml加入以下代码,保存文档,重新启动tomcat
<?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项目的route,配置一个覆盖所有的路由情况,然后在给出一个 404 页面。