vue-cli betreibt die Konfiguration der Webpack-Umgebung

Dieses Mal bringe ich Ihnen vue-cli zum Betrieb der Webpack-Umgebungskonfiguration. Was sind die Vorsichtsmaßnahmen für vue-cli zum Betrieb der Webpack-Umgebungskonfiguration? Schauen wir uns hier praktische Fälle an.

Der Grund, warum Vue jetzt so beliebt ist, liegt zum Teil am offiziellen Gerüstgenerierungstool Vue-cli, das die Kosten für die Einrichtung einer Umgebung für Anfänger erheblich vereinfacht. In der Praxis müssen wir sie jedoch häufig implementieren Andere Funktionen Um das Webpack zu transformieren, lernen Sie in diesem Artikel zunächst die von vue-cli generierte Vorlage basierend auf einigen tatsächlichen Geschäftsanforderungen kennen und nehmen dann relevante Änderungen vor.

Vue-cli generiertes Vorlagendateiverzeichnis

├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ └── main.js
└── static

Der Schwerpunkt dieses Artikels liegt auf

build – Kompilieren Sie den Code für die Aufgabe

config – Konfigurationsdatei

des Webpacks package.json – grundlegende Informationen zum Projekt

Die spezifische Bedeutung jeder Zeile der Webpack-Konfiguration wird hier nicht im Detail vorgestellt. Bitte beachten Sie die Analyse der Webpack-Konfigurationsdatei des vue2.0-Gerüsts

Allgemeine Anforderung 1: Konfiguration und Freigabe für mehrere Umgebungen

Die von Vue-cli generierte Vorlage wird nur mit den Skripten npm run dev und npm run build konfiguriert, um den Entwicklungsumgebungsdienst zu starten bzw. das Packen auszuführen. Ein normaler Entwicklungsprozess eines Unternehmens umfasst häufig mindestens Entwicklungs-, Testsimulations- und Produktionsumgebungen. Die Serveranforderungsadresse oder einige Konfigurationsparameter, auf die jede Umgebung reagiert, sind unterschiedlich und müssen beim Veröffentlichen auf mehreren Servern veröffentlicht werden. Daher müssen automatisierte Skripte ausgeführt werden. Erstellen und veröffentlichen.

Wir müssen dieses Problem zunächst klären und einen Artikel erneut drucken, Autor: Zheng Haibo, Link, Quelle: Zhihu

Das hat eigentlich nichts mit Vue zu tun, es ist eine allgemeine Frage: Wo wird der Code erstellt? Wenn sich der Server der Frage auf einen laufenden Server bezieht, ist keine der beiden Optionen tatsächlich eine gute Wahl. Viele Neulinge, darunter auch ich, dachten, der Bereitstellungscode sähe so aus, bevor ich mit der Arbeit begann

Tatsächlich wird es jedoch in größeren Internetunternehmen problematischer sein. Bei den folgenden Einführungen handelt es sich um gängige Vorgehensweisen und einige vereinfachte Prozesse dienen lediglich dem besseren Verständnis für Neulinge. Senden Sie den Code an den Git- oder SVN-Server.

Der Build-Server ruft die zu veröffentlichende Codeversion vom Git-Server ab 🎜>Installieren Sie die Abhängigkeiten, z. B. den Titel von vue. Und Build-Dateien für die Bereitstellung werden im Allgemeinen zur Verwaltung in ein komprimiertes Paket komprimiert

Das erstellte Release-Paket wird auf die Übertragungsstation hochgeladen: Dateiverwaltungsserver-Cluster

Der tatsächlich laufende Server ist Im Allgemeinen handelt es sich nicht um einen einzelnen Server, sondern um einen Cluster. Diese n Server ziehen das gleiche komprimierte Paket der entsprechenden Version vom Dateiserver, dekomprimieren es und führen es schließlich aus

Tatsächlich gibt es hier offensichtliche sequentielle Prozesse, die bei manueller Ausführung sehr mühsam wären. Daher verfügen große Unternehmen im Allgemeinen über eine automatische Bereitstellungsplattform, um diese Aufgaben zu koordinieren und abzuschließen „Bereitstellung“ vervollständigt den oben genannten Inhalt

Wenn Sie beispielsweise mit den von Gitlab und Github bereitgestellten Webhooks zusammenarbeiten, benachrichtigen sie die automatische Bereitstellungsplattform automatisch darüber, dass die stabile Version des Codes gepusht wurde (Push Ereignis). Dann brauchen wir nicht einmal auf den Button zu klicken. Dies ist ein typischer Fall der Trennung von Build und Bereitstellung, der viele Vorteile mit sich bringt, z. B. die Sicherstellung, dass eine Kopie des Codes erstellt wird, und die Vermeidung möglicher Inkonsistenzen, die durch Builds in mehreren Umgebungen verursacht werden. Die Erstellung ist im Allgemeinen ein hoher Overhead 🎜> Verhalten

, das zu Instabilitäten führen kann, die zu Instabilität auf dem laufenden Server führen, kann schnell zurückgesetzt oder wiederhergestellt werden, und die gleiche Version des Codes muss nicht neu erstellt werden. . . Allerdings ist das Packen und Erstellen keine einfache Angelegenheit, daher sind automatisierte Tools zum Konfigurieren erforderlich. Die bestehende ausgereifte Lösung besteht darin, Docker zum Erstellen einer Anwendungscontainer-Engine zum Erstellen, Veröffentlichen usw. zu verwenden. Allerdings kenne ich mich in diesem Bereich nicht aus. Einige Studenten, die sich damit auskennen, können es teilen.

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:

vue-cli+webpack So erstellen Sie eine Vue-Entwicklungsumgebung

So scrollen Sie mehrere native JS-Synchronisationsvorgang

Das obige ist der detaillierte Inhalt vonvue-cli betreibt die Konfiguration der Webpack-Umgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!