So gehen Sie mit dem von Tomcat gemeldeten 404-Fehler um, wenn das Vue-Projekt mit Webpack gepackt und bereitgestellt wird

Dieses Mal zeige ich Ihnen, wie Sie mit dem 404-Fehlerproblem umgehen, wenn Tomcat aktualisiert wird, wenn das Vue-Projekt-Webpack gepackt und bereitgestellt wird. Welche Vorsichtsmaßnahmen sind zu beachten? Dies ist ein Praktischer Fall, werfen wir einen Blick darauf.

Aufgetretene Probleme

Veröffentlichen Sie nach der Verwendung von Webpack zum Packen von Vue die gepackte Datei in Tomcat. Der Zugriff ist erfolgreich, die Aktualisierung erfolgt jedoch anschließend Die Seite hat einen 404-Fehler gemeldet.

Nach einer Suche im Internet stellte sich heraus, dass es sich um ein Problem handelt, das durch den HTML5-Verlaufsmodus verursacht wurde. Der Vue-Beamte hat eine Erklärung für den spezifischen Grund gegeben. Sie können https://router.vuejs.org /zh-cn/essentials/history-mode.html

Aber nach dem Lesen kam das Problem erneut. In der offiziellen Lösung wurde nicht angegeben, wie es unter Tomcat gelöst werden kann.

Lösung

Gemäß dem offiziellen Lösungsprinzip

Sie müssen eine auf dem Server hinzufügen, um alle Situationen des Kandidaten abzudecken Ressourcen: Wenn die URL mit keinen

statischen Ressourcen übereinstimmt, sollte sie dieselbe index.html-Seite zurückgeben, also die Seite, von der Ihre App abhängt.

Sie können dies also unter dem Tomcat-Server tun. Erstellen Sie einen neuen WEB-INF-Ordner im Stammverzeichnis des gepackten Projekts und schreiben Sie eine web.xml in WEB-INF.

Schreiben Sie 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>

Der Zweck besteht darin, zur Seite index.html zurückzukehren, sobald ein 404 auftritt.

Schließlich müssen Sie Ihre Route konfigurieren, eine Routing-Situation konfigurieren, die alle abdeckt, und dann eine 404-Seite bereitstellen.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung der Schritte, mit denen PHP eine zufällige Zeichenfolge mit benutzerdefinierter Länge generiert

php zu Generieren Sie Zufallszahlen, Buchstaben oder eine gemischte Folge aus Zahlen und Buchstaben

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit dem von Tomcat gemeldeten 404-Fehler um, wenn das Vue-Projekt mit Webpack gepackt und bereitgestellt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!