Vue cli3 configures production environment, development environment, and test environment

Preface

Switch different environment api and other information through different command lines

E.g:

npm run serve calls the local environment api
npm run test calls the test environment api
npm run build calls the online environment api

1. First add in the package.json file:

"test": "vue-cli-service build --mode test" 

Knowledge point supplement:
The name of the parameter can be defined according to people's preferences.
vue cli 3 serve is the running code. Build is a packaged code
. When we package, we turn the serve operation into a development environment, and the build package becomes a production environment.
Add test after -mode, it means to run. env.test is
not added, serve is automatically default. env.development build is automatically default.env.production

2. Create a .env file and a .env.test file in the project directory

2.1, .env file

NODE_ENV = 'production'
VUE_APP_FLAG = 'pro'

2.2, .env.test file

NODE_ENV = 'production'
VUE_APP_FLAG = 'test'
outputDir = test  //outputDir：打包时的输出目录名字，若需默认输出到dist目录，则可不写该变量

Knowledge point supplement:
see 4

2.3. Add in the vue.config.js file:

outputDir: process.env.outputDir, 

3. Configure api variables

This configuration needs to vary from code to code

3.1, configure the baseURL path of axios

Then we need to configure the baseURL of axios in main.js, and configure different codes according to different environments

/*第一层if判断生产环境和开发环境*/
if (process.env.NODE_ENV === 'production') {
    
    
    /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
    if (process.env.VUE_APP_FLAG === 'pro') {
    
    
        //production 生产环境
        axios.defaults.baseURL = 'http://api.xinggeyun.com';
 
    } else {
    
    
        //test 测试环境
        axios.defaults.baseURL = 'http://192.168.0.152:8102';
 
    }
} else {
    
    
    //serve 开发环境
    axios.defaults.baseURL = 'http://192.168.0.152:8102';
}

3.2, self-splicing path

The grammar is the same as the above grammar. The environment is judged according to process.env.NODE_ENV, and then the basic path is modified to be spliced

/*第一层if判断生产环境和开发环境*/
if (process.env.NODE_ENV === 'production') {
    
    
    /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
    if (process.env.VUE_APP_FLAG === 'pro') {
    
    
        //production 生产环境
        var baseUrl = 'https://www.xxxxxx.com/api/';
    } else {
    
    
        //test 测试环境
        baseUrl = 'http://test.xxxxx.com:9999/api/';
 
    }
} else {
    
    
    //serve 开发环境
    baseUrl = 'http://192.168.4.17:8069/b2b/api/';
}

4. Supplement of .env knowledge points

4.1. Regarding the file name: it must be named as follows, do not name it randomly, and there is no need to manually control which file to load

.env global default configuration file, no matter what the environment will be loaded and merged

.env.development Development environment configuration file

.env.production configuration file in production environment

4.2, about content

Note: The attribute name must start with VUE_APP_, such as setting other variables VUE_APP_NAME=stark

4.3, about file loading:

According to the startup command, vue will automatically load the corresponding environment. Vue is loaded according to the file name, so it says "Don't name it randomly, and you don't need to specifically control which file is loaded." For
　　example, execute the npm run serve command, and it will automatically load .env.development file

Note: The .env file is a common file that will be loaded whether it is development or generation

If we run npm run serve to load the .env file first, and then load the .env.development file, if the two files have the same item, then the file loaded later will overwrite the first file, that is. The env.development file overrides the NOOE_ENV option of the .env file.

If we need to load a private case, we can do it like test, -mode test. When we run it, we run the env.test file

4.4, about the reading of the .env file:

You can get the set variables through process.env