Welche Probleme gibt es beim Verpackungspfad vue+webpack?

Dieses Mal werde ich Ihnen zeigen, welche Probleme es im Vue+Webpack-Verpackungspfad gibt. Was sind die Vorsichtsmaßnahmen zum Vue+Webpack-Verpackungspfad in Shanxi? . Werfen wir einen Blick darauf.

Ich habe kürzlich ein kleines Vue-Projekt geschrieben, das ich nicht als separates Webprojekt veröffentlichen wollte, also hatte ich vor, es im öffentlichen Ordner des Ressourcenprojekts abzulegen Ich fasse sie hier zusammen.

Der Ressourcenpfad lautet wie folgt:

Der im öffentlichen Verzeichnis konfigurierte Zugriffspfad lautet „ /“, auf diese Weise In diesem Fall wird unser Zugriffspfad zu „Domänenname/vue-demo“. Beim Zugriff auf das Programm wurde kein Fehler gemeldet, aber die Seite war leer. Bisher gab es keine Probleme mit Projekten, die auf diese Weise veröffentlicht wurden, aber was ist dieses Mal passiert?

Nach sorgfältiger Untersuchung stellte ich fest, dass der Vue-Router Probleme verursachte. Aufgrund der Projektanforderungen wird das Scrollverhalten verwendet. Das Scrollverhalten muss den Verlaufsmodus aktivieren. In der offiziellen Dokumentation des Vue-Routers gibt es einen solchen Satz:

Wenn Sie den Verlaufsmodus verwenden, ist die URL genau wie eine normale URL, z. B. http://yoursite.com/user/id, was auch großartig aussieht!

Um diesen Modus jedoch gut spielen zu können, benötigen Sie auch Unterstützung für die Hintergrundkonfiguration. Da es sich bei unserer Anwendung um eine Single-Page-Client-Anwendung handelt, wird 404 zurückgegeben, wenn der Hintergrund nicht korrekt konfiguriert ist und der Benutzer im Browser direkt auf http://oursite.com/user/id zugreift .

Sie müssen also eine Kandidatenressource auf dem Server hinzufügen, um alle Situationen abzudecken: Wenn die URL mit keiner

statischen-Ressource übereinstimmt, sollte sie dieselbe index.html-Seite zurückgeben, nämlich diese Seite Es ist die Seite, von der Ihre App abhängt.

Die von unserem Vue-Router überwachten Pfade sind immer noch „/“ und „/component“ und die natürlichen Pfade stimmen nicht überein.

Daher müssen wir die Routen ändern und den Projektnamen zu jedem Pfad hinzufügen, also „/vue-demo“. Gleichzeitig muss der publicPath, um sicherzustellen, dass die Ressourcendateien korrekt geladen werden, hinzugefügt werden Beim Packen muss auch „/vue-demo“ hinzugefügt werden.

Fertig! !

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:

Wie man mit dem Ausfall von Schrift- und Bildressourcen nach der Vue-Verpackung umgeht

So lösen Sie das Problem Das Problem, dass das Webpack-Schriftartsymbol nicht angezeigt werden kann

Das obige ist der detaillierte Inhalt vonWelche Probleme gibt es beim Verpackungspfad vue+webpack?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!