So lösen Sie das Problem, dass die Seite leer ist, nachdem der Routing-Verlaufsmodus unter Vue gepackt wurde

Dieser Artikel stellt hauptsächlich die leere Seite vor, nachdem der Routing-Verlaufsmodus unter Vue gepackt wurde. Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.

Vue-Routing erfolgt im Standard-Hash-Modus und es gibt im Allgemeinen kein Problem mit der Standardverpackung. Der Hash-Modus ist jedoch nicht schön, da die URL ein # enthält und es beim Teilen zu einigen Problemen kommt WeChat, Autorisierung der Anmeldung usw. Daher stoßen Neulinge häufig auf die Situation, dass die Seite nach dem Packen des Verlaufsmodus leer ist und keine Fehlermeldung über einen Ressourcenladefehler angezeigt wird >

Wenn Sie dies sorgfältig studieren, werden Sie feststellen, dass es kein Problem gibt, wenn das Projekt direkt im Verzeichnis abgelegt wird. Wenn es sich um ein Unterverzeichnis handelt, ist es leer dass Sie eine Basis hinzufügen müssen

// base: '/history',
// mode: 'history',

Diese Basis ist der Projektpfad.

Nachdem beide oben genannten Probleme gelöst sind, Sie werden feststellen, dass derzeit nur auf die Homepage zugegriffen werden kann. Es ist auch möglich, über die Homepage auf andere Routen zu klicken. Wenn jedoch beim Aktualisieren in anderen Routen ein Fehler auftritt, sollten diejenigen, die den Verlaufsmodus verstehen, dies auch wissen Der Verlaufsmodus ist der History.pushState der h5-API, aber auf dem realen Server gibt es keine solche Pfadressource. Gibt es dieses Problem nicht? #, die der Server nicht analysiert, sondern nur HTML zurückgibt, wird index.html gemäß dem Vue-Routing analysiert, während der Verlaufsmodus diese Adresse auf dem Server anfordert, die auf dem Server nicht verfügbar ist Fehler. In der offiziellen Dokumentation von vue-router werden verschiedene Konfigurationen vorgestellt, z. B. die NGNIX-Konfiguration

 location / {
 try_files $uri $uri/ /index.html;
}

Das Obige gilt für direkte Projekte. Das Stammverzeichnis ist in Ordnung , aber wenn das Projekt nicht das Stammverzeichnis ist, wird es immer noch Probleme geben,

location /history {
   root C:/web/static;
 index index.html index.htm;
 #error_page 404 /history/index.html;
 if (!-e $request_filename) {
  rewrite ^/(.*) /history/index.html last;
  break;
 }
}

Das Obige ist der Projektpfad mit dem Namen „history“, wie folgt Bei der Konfiguration tritt nach der Vue-Paketierung kein Problem mit leeren Seiten auf, und auf die Verlaufsweiterleitung kann frei zugegriffen werden. Beachten Sie jedoch, dass bei Nicht-Root-Verzeichnisprojekten der Basispfad hinzugefügt werden muss Das ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in die Startbildschirmoptimierung der Vue SPA-Einzelseitenanwendung

Vue implementiert eine feste Zahl der Eingabezeilen im Textbereich Die Idee, einen Unterstreichungsstil hinzuzufügen

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die Seite leer ist, nachdem der Routing-Verlaufsmodus unter Vue gepackt wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!