Vue2 development environment and formal environment configuration

1. First add two files, one for the official environment and one for the development environment (my company project only has two environments, the test environment and the official environment, so the development environment is actually the api address of the test environment), the file name It is best to copy directly to avoid wasting development time by typing and troubleshooting

.env.development // 开发环境(也可以是测试环境，具体看个人配置)
.env.production  //  正式环境

2. The content of the .env.development file must start with VUE_APP_.

NODE_ENV = 'development'
VUE_APP_LOGIN_URL = 'https://tst-xxxxxxx.com' // 开发(测试)环境API地址

The content of the .env.production file, the attribute must start with VUE_APP_.

NODE_ENV = 'production'
VUE_APP_LOGIN_URL = 'https://tst-xxxxxxx.com' // 正式环境API地址

3. Used in request, process.env is global

const service = axios.create({
    
    
  baseURL: process.env.VUE_APP_LOGIN_URL,  // 在请求中进行配置
  timeout: 10000,
  method
});

4. Configuration in package.json

"scripts": {
    
    
    "serve": "vue-cli-service serve --mode development",  // npm run serve 本地运行测试(开发)环境
    "formal": "vue-cli-service serve --mode production",  // npm run formal 本地运行正式环境
    "build": "vue-cli-service build --mode production",  // npm run build 打包正式环境
    "test": "vue-cli-service build --mode development"  // npm run test 打包测试(开发)环境
 },