Méthode 1 : Configurer l'environnement de développement, l'environnement de test et l'environnement de production avec vue-cli (webpack)

Description de la scène :   

        Étant donné que l'environnement de développement, l'environnement de test et l'environnement de production sont placés sur des serveurs différents, les adresses URL d'interface demandées sont différentes. Toutes les configurations doivent utiliser des adresses de serveur différentes en fonction des différents environnements.

Résoudre le problème:

Veuillez lire brièvement la documentation officielle pour comprendre les concepts.

1. Création du répertoire racine .env.development, des fichiers (développement, tests, production .env.test).env.production

 

2. Contenu du fichier et description du champ

• NODE_ENV: peut être défini sur d'autres valeurs, telles que "test", mais la structure des répertoires du package est différente de "production", elle est donc toujours définie sur "production" et l'environnement est distingué via la variable "VUE_APP_MODE"
• VUE_APP_MODE:Environnement de test en ligne
• VUE_APP_API_URL:adresse d'appel de l'API
• outputDir:Le nom du dossier généré par le package, la valeur par défaut est 'dist'

2.1.Contenu  .env.development_

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'http://192.168.1.33:8008/api/'

2.2.Contenu  .env.test_

NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
outputDir = test

2.3.Contenu  .env.production_

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'

3. Modification vue.config.jsdu répertoire d'entrée du packaging

 4. Modifier package.jsonles fichiers

 

"test": "vue-cli-service build --mode test",//打包测试环境
"publish": "vue-cli-service build && vue-cli-service build --mode test",//测试和生产一起打包

5. Modifier notre propre fichier d'interface de paiement

 

6. Emballage

Courir npm run testounpm run publish

 testC'est pour l'environnement de test et distc'est pour l'environnement de production.

7. Autres instructions

Laissez-moi vous expliquer à nouveau pourquoi il est process.env.VUE_APP_MODEutilisé pour juger plutôt que pour utiliser process.env.NODE_ENV. Si nous le définissons sur dans .env.testle fichier , alors la structure des répertoires emballés sera différente. La différence est comme indiqué ci-dessousNODE_ENVtest