Lösung für die leere Seite nach einem vue.js-gepackten Projekt

Ich glaube, dass viele Partner, die gerade erst mit Vue in Kontakt gekommen sind, auf ein solches Problem stoßen werden. Das heißt, das Vue-Projekt läuft in der Entwicklungsumgebung normal, aber nach dem Verpacken ist die Seite index.html beim Öffnen leer und beim Öffnen der Konsole wird ein solcher Fehler festgestellt

Es gibt zwei Möglichkeiten, mit dieser Situation umzugehen (vue-cli2 und vue-cli3). Lassen Sie uns zuerst über vue-cli2 sprechen. Suchen Sie zuerst die Datei config/index.js und ändern Sie den Pfad von assetPublicPath in "./".

Vue-cli3 ist etwas problematischer, da vue-cli3 viel einfacher ist und keine Konfigurationsdatei hat, sodass Sie diese selbst erstellen müssen. Sie können sie nur im Stammverzeichnis des Projekts erstellen, und der Name der Datei kann nur vue.config.js sein. Fügen Sie dieser Datei dann den folgenden Code hinzu

modul.exporte = {
    assetDir: "statisch",
    parallel: falsch,
    öffentlicher Pfad: './',
} 

Bei diesem Schritt sollte es in Ordnung sein, aber einige Freunde zeigen es immer noch nicht an. Das liegt an Ihrem Routing-Modus. Sie müssen nur Ihren Routing-Modus auf „Hash“ ändern. Obwohl es ein bisschen hässlich ist, ist zumindest die Funktion verfügbar. Wenn Sie den „Hash“-Modus nicht verwenden möchten und den historischen Modus verwenden müssen, funktioniert dies lokal nicht. Sie müssen den Server verwenden. So verwenden Sie nginx mit vue, um den historischen Modus zu verwenden

Ich werde nicht über die Installation von nginx sprechen. Vorausgesetzt, Sie haben nginx bereits installiert, fügen Sie hinzu

Standort /aaa {undefined
            Alias ​​D:/bbb/ccc;
            Index Index.html Index.htm;
            Versuchen Sie, Dateien $uri $uri/ /aaa/index.html zu versuchen.
        }

Unter diesen ist /aaa die Adresse, auf die zugegriffen werden soll, D:/bbb/ccc ist der Pfad, in dem Ihre Datei tatsächlich gespeichert ist, index bezieht sich auf Ihre Eintragsdatei. Wenn Ihr Dateiname nicht index.html ist, ersetzen Sie ihn durch den Namen Ihrer Eintragsdatei. Das Wichtigste hier ist try_files $uri $uri/ /aaa/index.html, das hauptsächlich zur Handhabung des Verlaufsmodus von vue verwendet wird. Nachdem Sie nginx konfiguriert haben, müssen Sie dem Projekt etwas hinzufügen. Tatsächlich ist es auch sehr einfach. Fügen Sie es einfach zum src-Verzeichnis des Projekts hinzu.

Fügen Sie config/index.js hinzu

Andernfalls führt das Aktualisieren der Seite zu einem 404-Fehler. Dies ist natürlich der Fall, wenn das Projekt in die sekundäre Route eingefügt wird. Wenn es sich um eine primäre Route handelt, müssen Sie das Basisattribut nicht hinzufügen.

Der endgültige Effekt ist wie folgt.

Damit ist der Prozess von der Vue-Verpackung bis zur Bereitstellung abgeschlossen. Ich hoffe, es wird allen eine Hilfe sein.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.