编程知识 cdmana.com

Vue CLI Multi - Environment Build Packaging

Introduction à plusieurs environnements

Documents officiels:https://cli.vuejs.org/zh/guide/mode-and-env.html

Documents environnementauxRègles de nommage pour:

.env                # Chargé dans tous les environnements
.env.local          # Chargé dans tous les environnements,Mais sera git Ignorer
.env.[mode]         # N'est chargé que dans le mode spécifié
.env.[mode].local   # N'est chargé que dans le mode spécifié,Mais sera git Ignorer

Dans le dossier"Clé=Valeur"Configurer les variables d'environnement sous forme de,Si des variables d'environnement portant le même nom existent dans différents fichiers,Conserver les valeurs dans les fichiers hautement prioritaires.La priorité est:.env.[mode].local > .env.[mode] > .env.local > .env

Votre attention, s'il vous plaît.,Seulement NODE_ENV,BASE_URL Et VUE_APP_ Les variables qui commencent par webpack.DefinePlugin Incorporé statiquement dansClientDans le Code du côté.

IntégrationÇa veut dire...,Ces variables d'environnement sont accessibles dans le code client.Par exemple, vous pouvez obtenir des variables comme ça:console.log(process.env.VUE_APP_SECRET)

Spécifier l'environnement lors de la construction

Les mécanismes environnementaux sont: vue-cliRéalisé,En fait,Nous devons préciservue-cliDemode Les paramètres permettent la construction de différents environnements ,Le format de commande est:vue-cli-service build --mode {mode}

Rappelle - toi., Nous avons construit avec npm run build. En fait, la nature de cette commande est d'exécuter vue-cli-service build, La correspondance entre les deux est maintenue à package.json.Ouvre. package.json, Vous trouverez cette configuration :

  ...
  "scripts": {
    
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  ...

Quand nous couronsnpm run build,nodeJe vais le chercher. scriptsDans l'objet buildValeur de la propriété,C'est - à - direvue-cli-service buildPour mettre en œuvre.
La représentation abstraite est :npm run { key} --> scripts[key]

Dans ce cas,Pour spécifier vue-cliDemodeParamètres, Alors, on va tout droit scripts Quelques ordres de plus .Comme suit:

  ...
  "scripts": {
    
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:prod1": "vue-cli-service build --mode prod1",
    "build:prod2": "vue-cli-service build --mode prod2"
  },
  ...

Quand l'exécution npm run build:prod1,Ce sera effectivement fait vue-cli-service build --mode prod1, Cette commande spécifie l'utilisation de prod1 Environnement. Le correspondant lira .env.prod1 Configuration de l'environnement.

Résumé

  1. Maintenir la configuration de l'environnement pour différents environnements .Format de commande:.env.[mode]
  2. Inpackage.jsonDescripts L'ajout de propriété spécifie la configuration de l'environnement .Format:vue-cli-service build --mode [mode]
  3. UtiliserscriptsDekey Valeur à construire .Format:npm run [key]

版权声明
本文为[Markix]所创,转载请带上原文链接,感谢
https://cdmana.com/2022/01/202201080559015507.html

Scroll to Top