Detaillierte Erläuterung der Vue-Projektverpackung

1. Zugehörige Konfiguration

Fall 1 (das verwendete Tool ist vue-cil)

Wenn das Projekt mit vue-cli erstellt wird, gibt es im Projektverzeichnis keinen Konfigurationsordner. Daher müssen wir selbst eine Konfigurationsdatei erstellen. Erstellen Sie eine Datei vue.config.js im Stammverzeichnis src. Beachten Sie, dass der Dateiname vue.config.js sein muss. Fügen Sie dann den folgenden Code in die Datei ein:

 //Verpackungskonfigurationsdatei module.exports = {
  assetDir: "statisch",
  parallel: falsch,
  öffentlicher Pfad: './',
};

Der Aufbau ist wie folgt:

Fall 2 (das verwendete Tool ist webpack)

Wenn Sie Webpack verwenden, ändern Sie die Webpack-Konfiguration direkt in der Datei „index.js“ in der Konfiguration:

 assetPublicPath: './'

Der Aufbau ist wie folgt:

2. Verpackung

Rufen Sie nach Abschluss der Konfiguration die Konsole auf und geben Sie den Verpackungsbefehl npm run build ein, um mit der Verpackung zu beginnen.

Nach erfolgreichem Abschluss wird die folgende Eingabeaufforderung angezeigt:

Und der Dist-Ordner wird automatisch im Projektverzeichnis generiert.

Der Ordner „dist“ enthält das Paket, das wir benötigen. Anschließend können wir es zur Bereitstellung auf dem Server ablegen. Es ist zu beachten, dass nach dem Verpacken, unabhängig davon, welche Änderungen am Projekt vorgenommen werden, npm run build zum erneuten Verpacken erforderlich ist.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!