404 There was a problem Vue question blank page refresh

404 There was a problem Vue question blank page refresh

the reason

Problem HTML5 History mode triggered by specific Why, Vue official explanation has been given, in accordance with the principles of the solution given by the official, a candidate resources to increase coverage in all cases of the server: If the URL match any static resource, You should return the same index.html page, which is dependent on the app page. Details https://router.vuejs.org/zh/guide/essentials/history-mode.html

Solution

1. In tomcat server packaged under a new web project root directory WEB-INF folder

2. Write a web.xml file in the WEB-INF

3. In the web.xml add the following code, save the document, restart 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. Finally, also you need to configure the web project route, configure a route covering all situations, and then given a 404 page.