Method 1: Configure development environment, test environment and production environment with vue-cli (webpack)

Scene description:   

        Since the development environment, test environment, and production environment are placed on different servers, the requested interface URL addresses are different. All configurations need to use different server addresses according to different environments.

Solve the problem:

Please briefly read the official documentation to understand the concepts.

1. Root directory creation .env.development, files (development, testing, production .env.test).env.production

 

2. File content and field description

• NODE_ENV: can be set to other values, such as "test", but the packaged directory structure is different from "production", so it is still set to "production" and the environment is distinguished through the "VUE_APP_MODE" variable
• VUE_APP_MODE:Online testing environment
• VUE_APP_API_URL:api calling address
• outputDir:The name of the folder generated by the package, the default is 'dist'

2.1.Content  .env.development_

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

2.2.Content  .env.test_

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

2.3.Content  .env.production_

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

3. Modifying vue.config.jsthe packaging input directory

 4. Modify package.jsonfiles

 

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

5. Modify our own payment interface file

 

6. Packing

Run npm run testornpm run publish

 testIt's for the test environment and distit's for the production environment.

7. Other instructions

Let me explain again why it is process.env.VUE_APP_MODEused to judge rather than use process.env.NODE_ENV. If we set it to in .env.testthe file , then the packaged directory structure will be different. The difference is as shown belowNODE_ENVtest