Schritte zum Verpacken und Freigeben des Vue-Projekts

Nachdem die Entwicklung des Vue-Projekts abgeschlossen ist, müssen wir das Projekt verpacken und online starten. Gleichzeitig hoffen wir, eine Vorschau des Projekts in der Produktionsumgebung lokal sehen zu können.

(Nehmen Sie als Beispiel das durch das Vue-CLI-Scaffolding generierte Projekt.)

1. Übergang von der Entwicklungsumgebung zur Produktionsumgebung

Nachdem die Projektentwicklung abgeschlossen ist, müssen wir zuerst das Backend benachrichtigen, um einen Online-Pfad zu erhalten, und dann vom vorherigen Entwicklungspfad auf den Online-Pfad umstellen.

Öffnen Sie die Datei dev.env.js im Konfigurationsordner des Projekts und geben Sie den vom Backend angegebenen Onlinepfad ein.

„streng verwenden“
modul.exporte = {
  NODE_ENV: '"Produktion"',
  BASE_API: '"http://sdk.*********.cn:3838/"' //Online-Pfad}

2. Legen Sie einen einheitlichen Anforderungspfad fest

Nachdem das Projekt gepackt wurde, befinden sich alle JS, CSS und Bilder in ihren eigenen einheitlichen Ordnern. Daher muss der vorherige Pfad geändert werden. Eine einzelne Änderung dauert zu lange. Was ist also zu tun?

Öffnen Sie utils.js im Build-Ordner und fügen Sie es entsprechend Ihren Anforderungen hinzu. Normalerweise werden zwei ../ hinzugefügt.

  wenn (Optionen.extrahieren) {
      returniere ExtractTextPlugin.extract({
        Einsatz: Lader,
        Fallback: „Vue-Style-Loader“,
        publicPath : '../../' // Neu hinzugefügter Inhalt, Pfadkonfiguration})
    } anders {
      gibt ['vue-style-loader'].concat(Lader) zurück
    }
  }

In einigen Fällen besteht das Problem, dass der Hauptpfad von HTML nicht korrekt eingegeben wird. Zu diesem Zeitpunkt müssen wir die Datei index.js im Konfigurationsordner konfigurieren und den AssetsPublicPath ändern. Beachten Sie, dass der AssetsPublicPath hier der AssetsPublicPath-Pfad in der Build-Produktionsumgebung ist, nicht der AssetsPublicPath in der Dev-Entwicklungsumgebung.

3. Führen Sie den Verpackungsbefehl aus

npm-Ausführung erstellen
//Im Allgemeinen wird es erstellt, wenn es nicht geändert wird

Die Ergebnisse nach dem Ausführen sind wie folgt:

Generieren Sie nach dem Ausführen einen Dist -Ordner

Damit ist dieser Artikel über die Schritte zum Verpacken und Online-Veröffentlichen des Vue-Projekts abgeschlossen. Weitere relevante Inhalte zum Verpacken und Online-Veröffentlichen des Vue-Projekts finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!