How to deal with the 404 error reported by Tomcat when the Vue project is packaged and deployed with webpack

This time I will bring you how to deal with the 404 error reported by Tomcat when the Vue project webpack is packaged and deployed. How to deal with the 404 error reported by Tomcat when the Vue project webpack is packaged and deployed. What are the precautions? This is a practical case, let’s take a look at it.

Problems encountered

After using webpack to package vue, publish the packaged file to Tomcat. The access is successful, but it is refreshed. The subsequent page reported a 404 error.

After searching on the Internet, it turns out that it is a problem caused by the HTML5 History mode. The Vue official has given an explanation for the specific reason. You can see

https://router.vuejs.org /zh-cn/essentials/history-mode.html

But after reading it, the problem came again. The official solution did not say how to solve it under tomcat.

Solution

According to the official solution principle

You need to add a server on the server to cover all situations Candidate resources: If the URL does not match any

static resources, it should return the same index.html page, which is the page your app depends on.

So you can do this under tomcat server. Create a new WEB-INF folder in the root directory of the packaged project, and write a web.xml in WEB-INF.

Write in 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" 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>

The purpose is to return to the index.html page once 404 occurs.

Finally, you need to configure your route, configure a routing situation that covers all, and then give a 404 page.

const router = new VueRouter({
 mode: 'history',
 routes: [
  { 
    path: '*', 
    component: (resolve) => require(['./views/error404.vue'], resolve) 
  }
 ]
})

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps for php to generate a random string of custom length

php generates random numbers, letters or Mixed string of numbers and letters

The above is the detailed content of How to deal with the 404 error reported by Tomcat when the Vue project is packaged and deployed with webpack. For more information, please follow other related articles on the PHP Chinese website!