VUE-CLI3 packages different online environment paths

      Recently, I received a strange demand. A completed project needs to be deployed on different online servers. In the past, VUE-cli3 scaffolding was used to develop without configuration. Just make a judgment in axios.js, as follows:

// 配置接口地址
if(process.env.NODE_ENV === "development"){
	//开发环境
	axios.defaults.baseURL = 'http://192.168.9.81:8080/cdps'
}else{
    //线上环境
	axios.defaults.baseURL = 'http://219.139.128.22:50193/core'
}

But in the face of requests from multiple online addresses, this configuration will not work, so I flipped through the vue-cli documentation , and found the following method, which may be simple and rude, but it is easy to use, and there is a better way Welcome to reply.

1. Create a file named .env.xxx in the statistics directory of the project’s package.json file, for example, mine is called .env.enshi (because the name of the online node is enshi), and then create a .env.production, As a standard online environment file

2. Configure the following in the .env.enshi file:

NODE_ENV = 'production'
VUE_APP_BASE_URL = 'http://120.192.66.228:8080/cdps'

3. Configure the following in the .env.production file:

NODE_ENV = 'production'
VUE_APP_BASE_URL = 'http://yy.yczxyy.com:5066/core'

4. Add configuration in package.json:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
//这是增加的
    "build-enshi": "vue-cli-service build --mode enshi",
    "lint": "vue-cli-service lint"
  },

5. Modify in axios.js as follows:

// 配置接口地址
if(process.env.NODE_ENV === "development"){
	//开发环境
	axios.defaults.baseURL = 'http://192.168.9.81:8080/cdps'
}else{
    //线上环境
	axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
}

6. When packaging, use the following instructions:

npm run build-enshi   //enshi节点的请求路径

npm run build         //标准线上环境

that's all!