Multi-environment variables of the vue project (walking through the pit)

Combing knowledge points (the pits I have stepped on)

1. When the vue project is running, it will run in different environments according to the started instructions.
   npm run server The development environment is development
npm run buildrunning in the production environment producion, and the project is packaged
2. The .env file is the environment configuration, which will be loaded when the project is running, and will only be loaded once. A separate environment configuration file will override the same properties of the global environment configuration
3. .env global environment configuration, .env.development development environment configuration, .env.production production environment configuration, random naming is not allowed
4. The default attributes in the .env file are NODE_ENV and VUE_APP_ENV
5. The added attribute name must start with VUE_APP_, such as: VUE_APP_XXX
6. The current environment configuration properties can be accessed anywhere through process.env

上面看懂了下面就不必看了

Little white process (a bunch of nonsense)

First look at the picture, this is a newly created project to

open package.json, in which scripts means to run scripts, and there are two default running environments.

npm run serverRun the development environment and development
npm run buildrun the production environment producion, and package the project

Add a new environment configuration file in the root directory

The .env file is global. Put public attributes, depending on your needs. A
separate environment configuration file will override the same attributes of the global environment configuration.

//.env.development  配置,记得改请求路径，按需求加入你需要的配置项
NODE_ENV='development'
VUE_APP_ENV='development'
VUE_APP_BASE_URL='https://elm.whz.org' //开发环境下的请求路径，你不加VUE_APP_BASE前缀就访问不到！！！

//.env.production 配置 //同上，随便配，路径改成你需要的路径
NODE_ENV='production'
VUE_APP_ENV='production'
VUE_APP_BASE_URL='https://elm.whz2.org'

//.env.staging 同上
NODE_ENV='production'
VUE_APP_ENV='staging'
VUE_APP_BASE_URL='https://elm.whz3.org'

Next, there are two ideas:
1. You use process.env to introduce the attribute where you need to use the environment attribute, such as baseUrl

//优点：拿到就能用
//缺点：如果想更改属性，必须重启服务
let baseUrl=process.env.VUE_APP_BASE_URL

2. Create a new config folder, create a new env.js file, the code is as follows

const development = {
    
    
  //可以加更多环境属性
  baseUrl: 'https://elm.cangdu.org',
}
const production = {
    
    
  baseUrl: 'https://elm.cangdu.org',
}
const staging = {
    
    
  baseUrl: "https://elm.cangdu.org"
}

//动态设置环境属性，不必重启项目了
let env;
if (process.env.VUE_APP_ENV === 'development') {
    
    
  //开发环境下的执行操作
  env = development
} else if (process.env.VUE_APP_ENV === 'staging') {
    
    
  //测试环境下的执行操作
  env = staging
} else {
    
    
  //生产环境下的执行操作
  env = production
}

export default env

Introducing env into other components, you can use environment properties;
the advantage of writing this way is: you don't need to restart the project when you change the environment configuration information