Implementierung der Multi-Environment-Konfiguration (.env) des Vue-Projekts

Bevor ich mich mit der Konfiguration mehrerer Umgebungen beschäftigte, kam es mir sehr fortgeschritten vor, aber nachdem ich es tatsächlich ausgeführt hatte, fühlte es sich nur mittelmäßig an. Hier werde ich die aufgetretenen Probleme und die Lösungen beschreiben. Wenn etwas nicht stimmt, können Sie es gerne mitteilen.

Was ist eine Multiumgebungskonfiguration und warum brauchen wir sie?

Die am häufigsten verwendete Konfiguration für mehrere Umgebungen ist die Konfiguration der Entwicklungsumgebung und die Konfiguration der Produktionsumgebung (d. h. die Online-Konfiguration). In vielen Fällen unterscheiden sich der Domänenname und einige Konfigurationselemente in unserer Entwicklungsumgebung von denen in unserem Produktionsmodus. Zu diesem Zeitpunkt müssen wir eine Konfiguration für mehrere Umgebungen durchführen, da es sonst bei jeder Veröffentlichung einer Version mühsam ist, eine Datenwelle zu ändern. Eine andere Situation ist, dass Ihre beiden Projekte einen Satz Codes verwenden, diese aber letztendlich in unterschiedliche Pakete gepackt werden müssen. In diesem Fall verbessert die Konfiguration mehrerer Umgebungen die Entwicklungseffizienz erheblich.

Wo ist die .env-Datei konfiguriert?

Die .env-Datei wird im Stammverzeichnis Ihres Projekts auf derselben Ebene wie package.json konfiguriert, wie unten gezeigt.

Wie konfiguriere ich .env-Dateien und wie viele sollen konfiguriert werden?

Wie benenne ich die .env-Datei?
Als ich das erste Mal online danach suchte, sagten viele Blogger, der Name müsse
.env.development Konfigurationsdatei für die Entwicklungsumgebung
.env.production Konfigurationsdatei für die Produktionsumgebung
Eigentlich ist es das nicht . Wenn Sie eine Entwicklungsumgebung und eine Produktionsumgebung konfigurieren, ist es nicht falsch, sie so zu benennen. Wenn Sie jedoch gemeinsamen Code für mehrere Projekte verwenden, ist diese Benennung etwas unpassend. Das Benennungsformat für diesen Teil muss die Datei also nur mit .env beginnen, für den Rest können Sie einen beliebigen Namen verwenden .

Konfiguration der .env-Datei

In diesem Abschnitt geht es darum, alles zu konfigurieren, was Sie verwenden möchten. Wenn ich beispielsweise einen globalen Namen für das Projekt erhalten möchte, können Sie ihn einfach in .env konfigurieren. Im Folgenden werde ich ausführlich beschreiben, wie Sie den Wert erhalten.

Wenn Sie npm serve oder npm run build ausführen, wird standardmäßig die .env-Konfiguration verwendet.

Symbol:

//Hierfür ist nur VUE_APP_*** erforderlich. Es ist in Ordnung, es in diesem Format zu benennen. Sie können am Ende je nach Wunsch Groß- oder Kleinbuchstaben verwenden.
VUE_APP_NAME = "Lou Yuanyang"
VUE_APP_HTTPS = 'http://www.louhc.com/'
VUE_APP_ABBREVIATION = "louhc"
VUE_APP_LOGO = "louhc"

Nachdem die Standard-ENV-Datei konfiguriert ist, konfigurieren wir die ENV-Datei mit speziellen Anforderungen, z. B. „Ich möchte in einer anderen Umgebung einen anderen Namen verwenden.“ Beispielsweise die Datei .env.bsy. .bsy ist ein Name, den ich zufällig geschrieben habe und der angepasst werden kann.

//Hierfür ist nur VUE_APP_*** erforderlich. Es ist in Ordnung, es in diesem Format zu benennen. Sie können am Ende je nach Wunsch Groß- oder Kleinbuchstaben verwenden.
VUE_APP_NAME = "Baishan-Cloud"
VUE_APP_HTTPS = 'http://www.louhc.com:82/'
VUE_APP_ABBREVIATION = "bsy"
VUE_APP_LOGO = "bsy"

Und so weiter, Sie können so viele konfigurieren, wie Sie möchten.
Nachdem die .env-Datei konfiguriert ist, sollten wir die laufende Umgebung konfigurieren

So konfigurieren Sie die Betriebsumgebung

Suchen Sie die Datei package.json, wie unten gezeigt

Die Namen hinter build: und serve: sind frei wählbar und müssen mit diesen übereinstimmen, damit die entsprechenden Konfigurationselemente zur Laufzeit gefunden werden können.

 "Skripte": {
    "dienen": "vue-cli-service dienen",
    "Build": "Vue-CLI-Service-Build",
    "build:bsy": "vue-cli-service build --mode bsy",
    "build:kthz": "vue-cli-service build --mode kthz",
    "serve:bsy": "vue-cli-service serve --mode bsy",
    "serve:kthz": "vue-cli-service serve --mode kthz",
  },

Lassen Sie mich noch etwas mehr sagen: .env ist das Standardkonfigurationselement. Wenn das Umgebungskonfigurationselement ausgeführt wird, werden das Standardkonfigurationselement und das ausgeführte Umgebungskonfigurationselement zusammengeführt. Wenn die Parameter gleich sind, ist das Umgebungskonfigurationselement das Hauptelement. Einfach ausgedrückt: Das Standardkonfigurationselement ist vorhanden und das Umgebungskonfigurationselement ist ebenfalls vorhanden. Zu diesem Zeitpunkt wird der Wert des ausgeführten Umgebungskonfigurationselements als Grundlage verwendet. Wenn das Standardkonfigurationselement vorhanden ist und das Umgebungskonfigurationselement nicht vorhanden ist, kann der Wert des Standardkonfigurationselements auch abgerufen werden, wenn das Umgebungskonfigurationselement ausgeführt wird.

So erhalten Sie den Wert eines globalen Konfigurationselements

Beispiel: Wenn ich VUE_APP_NAME = '娄渊洋' in js erhalten möchte, schreiben Sie einfach diese Codezeile dort, wo Sie den Wert process.env.VUE_APP_NAME zuweisen möchten.

console.log(process.env.VUE_APP_NAME) // In der Standardumgebung lautet der gedruckte Name Lou Yuanyang bsy und in der Standardumgebung Baishanyun

Wenn wir den Wert des globalen Konfigurationselements in HTML verwenden möchten, müssen wir ihn zuerst im Return zuweisen und können dann { verwenden. {}}, holen Sie sich den Wert, den Sie verwenden möchten.

So betreiben Sie die Umgebung

Führen Sie die Standardumgebung npm run serve aus
Führen Sie die angegebene Umgebung aus: npm run serve:bsy
Standardumgebungsverpackung npm run build
Umgebungspaket angeben npm run build:bsy
Wechseln Sie einfach zu einem anderen Umgebungsnamen

Dies ist das Ende dieses Artikels über die Implementierung der Multi-Environment-Konfiguration (.env) des Vue-Projekts. Weitere relevante Inhalte zur Vue-Multi-Environment-Konfiguration 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!