Vue页面刷新时出现404问题 空白问题

Vue页面刷新时出现404问题 空白问题

原因

HTML5 History 模式引发的问题，具体为什么，Vue官方已经给出了解释，根据官方给出的解决方案原理，要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是 app 依赖的页面。详情https://router.vuejs.org/zh/guide/essentials/history-mode.html

解决办法

1. 在tomcat服务器下的打包好的web项目根目录下新建一个WEB-INF文件夹

2. 在WEB-INF中写一个web.xml文件

3. 在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>

4. 最后还需要配置一下web项目的route，配置一个覆盖所有的路由情况，然后在给出一个 404 页面。