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 頁面。