Home > Article > Web Front-end > 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 seehttps://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 principleYou need to add a server on the server to cover all situations Candidate resources: If the URL does not match anystatic 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!