Kürzlich habe ich ein Problem mit dem Verpackungspfad über vue+webpack entdeckt

Im Folgenden werde ich einen Artikel mit Ihnen teilen, der das Problem des Vue+Webpack-Verpackungspfads löst. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

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 für das öffentliche 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, die Seite war jedoch 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 Anforderungen des Projekts muss das Scrollverhalten den Verlaufsmodus aktivieren. In der offiziellen Dokumentation von vue-router 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, und sie sieht auch gut aus!

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 richtig konfiguriert ist und der Benutzer direkt im Browser auf http://oursite.com/user/id zugreift, was nicht gut aussieht .

Sie müssen also auf der Serverseite eine Kandidatenressource hinzufügen, die alle Situationen abdeckt: Wenn die URL mit keiner statischen Ressource übereinstimmt, sollte sie dieselbe index.html-Seite zurückgeben, also die Seite Ihrer App hängt davon ab.

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 habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie zufälligen Schaltcode der WeChat-ID über JavaScript (ausführliche Anleitung)

Verwendung von ES6 durch WeakMap Lösen Sie das Speicherverlustproblem (ausführliches Tutorial)

Verwenden Sie vue+element-ui+ajax, um eine Instanz einer Tabelle zu implementieren

Das obige ist der detaillierte Inhalt vonKürzlich habe ich ein Problem mit dem Verpackungspfad über vue+webpack entdeckt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!