vue项目的多环境变量（踩着坑走过来的）

知识点梳理（我踩过的坑）

1. vue项目在运行时会根据启动的指令来运行不同的环境
   npm run server运行的是开发环境development
npm run build运行的是生产环境producion，并将项目打包
2. .env文件是环境配置，会在项目运行时被加载，且只会被加载一次,单独的环境配置文件会覆盖全局环境配置的相同属性
3. .env全局环境配置，.env.development开发环境配置，.env.production生产环境配置，不允许胡乱命名
4. .env文件中的默认属性有NODE_ENV和VUE_APP_ENV
5. 添加的属性名必须以 VUE_APP_ 开头，如：VUE_APP_XXX
6. 可以通过process.env在任何地方访问到当前环境配置属性

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

小白式流程（废话一堆）

首先看图，这是新建好的项目

打开package.json,里面scripts是运行脚本的意思，其中有两个默认的运行环境。

npm run server运行的是开发环境development
npm run build运行的是生产环境producion，并将项目打包

根目录下添加新的环境配置文件

.env文件是全局的，放公共属性，看你需求
单独的环境配置文件会覆盖全局环境配置的相同属性

//.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'

接下来有两种思路
1.你在需要使用环境属性的地方使用process.env引入该属性，例如baseUrl

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

2.新建config文件夹，新建一个env.js文件，代码如下

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

在其他组件引入env，就能使用环境属性；
这样写的好处是：你在更改环境配置信息时，不用重启项目了