Ausführliche Erklärung der Modi und Umgebungsvariablen in Vue CLI

Vorwort

Bei der Entwicklung tatsächlicher Projekte durchlaufen wir im Allgemeinen die Projektentwicklungsphase, die Testphase und die abschließende Online-Phase. Die Anforderungen an den Projektcode können in jeder Phase unterschiedlich sein. Wie können wir also problemlos erreichen, dass unsere Projekte in verschiedenen Phasen unterschiedliche Effekte aufweisen und unterschiedliche Funktionen nutzen?
Hier müssen wir das Konzept der Umwelt einführen. Beschreibung der Modus- und Umgebungsvariablen in der offiziellen Dokumentation

Im Allgemeinen verfügt ein Projekt über die folgenden drei Umgebungen:

• Entwicklungsumgebung (Entwicklungsphase, lokale Entwicklungsversion, normalerweise unter Verwendung einiger Debugging-Tools oder zusätzlicher Hilfsfunktionen);
• Testumgebung (Testphase, Vorabversion, bis auf einige Fehlerbehebungen grundsätzlich kein großer Unterschied zur Online-Version);
• Produktionsumgebung (Online-Phase, die offiziell veröffentlichte Version ist im Allgemeinen optimiert und die Fehlerberichterstattung ist deaktiviert);
  

Als Entwickler müssen wir möglicherweise für jede Umgebung unterschiedliche Codes schreiben und sicherstellen, dass diese Codes in der richtigen Umgebung ausgeführt werden. Wie können wir also die Umgebung des Projekts im Code bestimmen und gleichzeitig unterschiedliche Codes ausführen? Dies erfordert von uns eine korrekte Konfiguration und Verwaltung der Umgebung.

1. Konfigurationsdatei

Um die Umgebung richtig zu konfigurieren, müssen wir zunächst die Beziehung zwischen verschiedenen Umgebungskonfigurationen verstehen, wie in der Abbildung dargestellt:

Aus dem obigen Bild können wir erkennen, dass jede Umgebung tatsächlich ihre eigenen unterschiedlichen Konfigurationen hat und dass es auch Schnittpunkte gibt. Die Schnittpunkte sind die Konfigurationselemente, die sie alle gemeinsam haben. Wie sollten wir also in Vue mit ihnen umgehen?

Wir können Dateien im folgenden Format im Stammverzeichnis erstellen, um Variablen in verschiedenen Umgebungen zu konfigurieren:

.env # in allen Umgebungen geladen
.env.local # In allen Umgebungen geladen, aber von Git ignoriert
.env.[mode] # Wird nur im angegebenen Modus geladen, zum Beispiel: .env.development, .env.production
.env.[mode].local # Wird nur im angegebenen Modus geladen, wird aber von Git ignoriert

Erstellen Sie beispielsweise eine Datei mit dem Namen .env.development, die angibt, dass sie nur in der Entwicklungsumgebung geladen wird.

In dieser Datei können wir die folgenden Schlüssel-Wert-Paare von Variablen konfigurieren:

# Konfiguration der Entwicklungsumgebung NODE_ENV=development
VUE_APP_API_BASE_URL=https://www.baidu.com/

Wie greifen wir derzeit in vue.config.js auf diese Variablen zu? Verwenden Sie process.env.[name], um darauf zuzugreifen.

// vue.config.js
console.log(process.env.NODE_ENV); // Entwicklung (Ausgabe im Terminal)

Wenn Sie den Befehl „npm run serve“ ausführen, werden Sie feststellen, dass die Ausgabe „Entwicklung“ ist, da für den Befehl „vue-cli-service serve“ standardmäßig die Umgebung „Entwicklung“ festgelegt ist.

Wenn wir es ändern müssen, können wir den Befehl des Serve-Skripts in package.json wie folgt ändern:

// paket.json
"Skripte": {
  "servieren": "vue-cli-service serve --mode stage",
},

–mode stage ändert tatsächlich das Moduskonfigurationselement in Webpack 4 in Stage und liest die Konfiguration unter der entsprechenden Datei .env.[model].
Wenn keine entsprechende Konfigurationsdatei gefunden wird, wird die Standardumgebung „Entwicklung“ verwendet. Ebenso wird „vue-cli-service build“ die Standardumgebung „Produktion“ verwenden.

Wenn Sie eine weitere .env-Datei erstellen, konfigurieren Sie dieselben Variablen erneut, jedoch mit anderen Werten.

# Umgebungskonfiguration NODE_ENV=ENV
VUE_APP_API_BASE_URL=http://www.soso.com/

Da die .env-Datei von allen Umgebungen geladen wird, also die öffentliche Konfiguration, welche wird dann ausgedruckt, wenn vue-cli-service serve schließlich ausgeführt wird?

Die Antwort ist Entwicklung.

Wenn die Datei .env.development.local jedoch wie oben beschrieben konfiguriert ist, lautet die Antwort ENV.

Daher überschreibt .env.[mode].local die gleiche Konfiguration unter .env.[mode].

In ähnlicher Weise überschreibt .env.local die gleiche Konfiguration unter .env.

Daraus können wir schließen, dass die Gewichte der gleichen Konfigurationselemente sind: .env.[mode].local > .env.[mode] > .env.local > .env
Hinweis: Zusätzlich dazu, dass dasselbe Konfigurationselement mit einer größeren Gewichtung das kleinere überdeckt, werden verschiedene Konfigurationselemente zusammengeführt, ähnlich der Verwendung von Object.assign in Javascript.

2. Umwelteinspritzung

Durch das Erstellen der obigen Konfigurationsdateien haben wir die Projektumgebung erfolgreich über die Befehlszeile eingerichtet und können frei wechseln. Beachten Sie jedoch, dass die im Front-End-Code von Vue gedruckte process.env möglicherweise von der Ausgabe in vue.config.js abweicht. Dies erfordert die Popularisierung eines Wissenspunkts: Webpack fügt process.env über das integrierte Plugin DefinePlugin in den Client-Code ein.

// Webpack-Konfiguration {
    ...
    Plugins: [
        neues webpack.DefinePlugin({
            'Prozess.Umgebung': {
                NODE_ENV: JSON.stringify(Prozess.Umgebung.NODE_ENV)
            }
        }),
    ], 
    ...
}

Da die von vue-cli 3.x gekapselte Webpack-Konfiguration diese Funktion bereits für uns erledigt hat, können wir den Wert von process.env direkt im Client-Code ausdrucken. Das Objekt kann mehrere Schlüssel-Wert-Paare enthalten, was bedeutet, dass mehrere Werte eingefügt werden können. Nach der Kapselung durch vue-cli werden jedoch nur Variablen, die in der Umgebungskonfigurationsdatei mit VUE_APP_ beginnen, für die Injektion unterstützt, mit Ausnahme der beiden speziellen Variablen NODE_ENV und BASE_URL.

Schreiben Sie beispielsweise in die Datei .env.development.local mit dem höchsten Gewicht:

# Konfiguration der Entwicklungsumgebung NODE_ENV=developmentLocal
VUE_APP_API_BASE_URL=https://www.baidu.com/
NAME=Javascript

Dann versuchen wir, process.env in vue.config.js auszudrucken, und die Terminalausgabe lautet:

{
    ...
    npm_config_ignore_scripts: '',
    npm_config_version_git_sign: '',
    npm_config_ignore_optional: '',
    npm_config_init_version: "1.0.0",
    npm_package_dependencies_vue_router: '^3.0.1',
    npm_config_version_tag_prefix: "v",
    npm_node_execpath: "/usr/local/bin/node",
    NODE_ENV: "EntwicklungLocal",
    VUE_APP_API_BASE_URL: 'https://www.baidu.com/',
    NAME: 'javascript',
    BABEL_ENV: 'Entwicklung',
    ...
}

Sie können sehen, dass der Ausgabeinhalt zusätzlich zu den Variablen in der Umgebungskonfiguration viele npm-Informationen enthält. Beim Drucken in der Eintragsdatei main.js finden Sie jedoch die Ausgabe:

{
  BASE_URL: "/",
  NODE_ENV: "EntwicklungLocal",
  VUE_APP_API_BASE_URL: "https://www.baidu.com/",
}

Es ist ersichtlich, dass Variablen, die nicht mit VUE_APP_ beginnen, während der Injektion gefiltert werden. Die zusätzliche BASE_URL ist der Wert, den Sie in vue.config.js festgelegt haben und der standardmäßig auf / eingestellt ist. In der Umgebungskonfigurationsdatei ist er ungültig.

3. Zusätzliche Konfiguration

Oben konfigurieren wir verschiedene Variablenwerte für verschiedene Umgebungen des Projekts, indem wir neue Konfigurationsdateien erstellen, wodurch eine grundlegende Umgebungsverwaltung des Projekts realisiert werden kann. Die Parameter in Konfigurationsdateien wie .env unterstützen derzeit jedoch nur statische Werte und dynamische Parameter können nicht verwendet werden. In einigen Fällen können bestimmte Anforderungen nicht erfüllt werden.

Jetzt können Sie einen neuen Konfigurationsordner im Stammverzeichnis erstellen, um einige zusätzliche Konfigurationsdateien zu speichern.

/* Konfigurationsdatei index.js */
 
// Öffentliche Variablen const com = {
  IP: JSON.stringify('xxx')
};

modul.exporte = {
  // Entwicklungsumgebungsvariablen dev: {
    Umgebung: {
      TYP: JSON.stringify('dev'),
      ...mit
    }
  },
  // Produktionsumgebungsvariablen build: {
    Umgebung: {
      TYP: JSON.stringify('prod'),
      ...mit
    }
  }
}

Der obige Code unterteilt Umgebungsvariablen in öffentliche Variablen, Entwicklungsumgebungsvariablen und Produktionsumgebungsvariablen. Natürlich können diese Variablen dynamisch sein, wie beispielsweise die IP-Adresse des Benutzers.
Jetzt müssen wir diese Variablen in vue.config.js einfügen. Wir können chainWebpack verwenden, um den Wert in DefinePlugin zu ändern:

/* vue.config.js */
const configs = erfordern('./config');
 
// Wird verwendet, um die entsprechende Zusammenführungsverarbeitung durchzuführen const merge = require('webpack-merge');
 
// Bestimmen Sie basierend auf der Umgebung, welche Konfiguration verwendet werden soll const cfg = process.env.NODE_ENV === 'production' ? configs.build.env : configs.dev.env;
modul.exporte = {
  chainWebpack: Konfiguration => {
    config.plugin('define').tap(args => {
      let name = "Prozess.Umgebung";
      // Verwenden Sie „Merge“, um sicherzustellen, dass der ursprüngliche Wert unverändert bleibt. args[0][name] = merge(args[0][name], cfg);
      Argumente zurückgeben
    })
  },	
}

Abschließend kann das Objekt mit der dynamischen Konfiguration erfolgreich auf dem Client ausgedruckt werden:

{
  BASE_URL: "/",
  IP: "xxx",
  NODE_ENV: "EntwicklungLocal",
  TYP: "dev",
  VUE_APP_API_BASE_URL: "https://www.baidu.com/",
}

4. Tatsächliche Szenarien

Verwenden Sie process.env.xxx, um auf Eigenschaften zuzugreifen

<Skript>
Standard exportieren {
  Daten() { 
    zurückkehren {
      BASEURL:Prozess.env,
    } 
  },  
  montiert(){
 	console.log(diese.BASEURL.VUE_APP_API_BASE_URL) // https://www.baidu.com/
  }
}
</Skript> 

// Eine Axios-Instanz erstellen const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // URL = Basis-URL + Anforderungs-URL
  Zeitüberschreitung: 5000
})

Abschluss

Die Konfiguration und Verwaltung der Umgebung spielt bei der Konstruktion des Projekts eine entscheidende Rolle. Durch die Konfiguration verschiedener Umgebungen für das Projekt können wir nicht nur die Flexibilität der Entwicklung erhöhen und die Skalierbarkeit des Programms verbessern, sondern auch den Betriebsmechanismus des Projekts in verschiedenen Umgebungen verstehen und analysieren und ein globales Konzept erstellen.

Dies ist das Ende dieses Artikels über Modi und Umgebungsvariablen in Vue CLI. Weitere relevante Vue CLI-Modi und Umgebungsvariablen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!