Anleitung zur Verwendung von env in vue cli

Vorwort

Ich glaube, dass diejenigen, die vueCli zur Entwicklung von Projekten verwendet haben, etwas deprimiert sind. Während der normalen Entwicklung gibt es drei Schnittstellenumgebungen (Entwicklung, Test und formal), aber vueCli bietet nur zwei Modi für Entwicklung und Produktion (ohne Test-Einzeltest). Tatsächlich liegt dies daran, dass die Freunde die vueCli-Dokumentation nicht verstehen.

Im vueCli-Befehl entspricht --mode .env.[mode] statt NODE_ENV

Beachten

Zusätzlich zu den VUE_APP_-Variablen.

Es gibt zwei spezielle Variablen:

• NODE_ENV: ist einer von Entwicklung, Produktion und Test. Sein Wert hängt vom Modus ab, in dem die Anwendung ausgeführt wird.
• BASE_URL: Dies entspricht der Option „publicPath“ in vue.config.js. Dabei handelt es sich um den Basispfad, in dem Ihre Anwendung bereitgestellt wird.

Einführung-Offiziell

Der Modus ist ein wichtiges Konzept im Vue CLI-Projekt. Standardmäßig verfügt ein Vue CLI-Projekt über drei Modi:

• Der Entwicklungsmodus wird für den Vue-CLI-Service-Server verwendet.
• Der Testmodus wird für den Vue-CLI-Service Test:Unit verwendet.
• Der Produktionsmodus wird für den Vue-CLI-Service-Build und den Vue-CLI-Service-Test verwendet: e2e

Sie können den Standardmodus überschreiben, indem Sie das Optionsargument --mode an die Befehlszeile übergeben.

Beim Ausführen des Befehls vue-cli-service werden alle Umgebungsvariablen aus den entsprechenden Umgebungsdateien geladen. Wenn die Datei die Variable NODE_ENV nicht enthält, hängt ihr Wert vom Modus ab. Im Produktionsmodus ist sie beispielsweise auf „Produktion“, im Testmodus auf „Test“ und der Standardwert ist „Entwicklung“.

NODE_ENV bestimmt den Modus, in dem Ihre App ausgeführt wird (Entwicklung, Produktion oder Test) und bestimmt daher auch, welche Webpack-Konfiguration erstellt wird.

Wenn Sie beispielsweise NODE_ENV auf „test“ setzen, erstellt Vue CLI eine optimierte Webpack-Konfiguration für Unit-Tests, die keine Bilder und andere Ressourcen verarbeitet, die für Unit-Tests nicht erforderlich sind.

In ähnlicher Weise erstellt NODE_ENV=development eine Webpack-Konfiguration, die Hot-Loading ermöglicht, keine Assets hasht und keine Vendor-Bundles generiert, um schnelle Neuaufbauten während der Entwicklung zu ermöglichen.

Wenn Sie den Build-Befehl „vue-cli-service“ ausführen, sollten Sie NODE_ENV immer auf „Produktion“ setzen, um eine bereitstellbare Anwendung zu erhalten, unabhängig davon, in welcher Umgebung Sie die Bereitstellung durchführen.

Beispielkonfiguration

Wir haben jetzt drei Konfigurationsdateien, wie folgt

#.umgebung.entwicklung
NODE_ENV=Entwicklung
VUE_APP_AXIOS_BASEURL=http://xxxx
#.env.preview Testumgebungskonfiguration NODE_ENV=production
VUE_APP_AXIOS_BASEURL=http://xxxx
#.umgebung.produktion
NODE_ENV=Produktion
VUE_APP_AXIOS_BASEURL=http://xxxx

Verwendung in Axios

importiere Axios von „Axios“;
const conf = {
  Basis-URL: process.env.VUE_APP_AXIOS_BASEURL,
};
gibt axios.create(conf) zurück;

package.json-Konfiguration

{
  "Skripte": {
    "dienen": "vue-cli-service dienen",
    "Build": "vue-cli-service build --mode Vorschau",
    "Build:Release": "Vue-CLI-Service-Build"
  }
}

Startmethode

npm run serve #Standard-Entwickler
npm run build #Testumgebung npm run build:release #Formale Umgebung

Dies ist das Ende dieses Artikels über die Verwendungsanleitung für env in vue cli. Weitere relevante Inhalte zu vue cli env finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!