前端项目环境变量解读以及转换

项目开发时，关于环境变量文件我们可以看到以下3个文件：

.env.development:开发环境变量文件

.env.starting:测试环境变量文件

.env.production:生产环境变量文件（正式环境）

对应不同的开发需求需要用到不同的环境变量，每个环境的数据是独立的，开发环境不能看到测试环境和生产环境，反之也一样。例如：数据的独立性要求面对不同开发需求需要调整为对应的接口（虽然代码是一样的），这就要求项目需要有切换接口的能力。

现在对应不同的环境需要调整不同的接进行开发：

开发环境：http://dev.itcast.cn

测试环境：http://test.itcast.cn

生产环境：http://prod.itcast.cn

现在需要将地址对应配置到环境变量文件中，如图：

（tips:这里需要注意：环境变量接口需要以“VUE_APP_”开头作为属性名，否则无法被客户端代码src读取。）

关于环境变量显示的结果是什么呢？这里在mai.js文件中打印看看~

（tips：获取环境变量的值固定语法 process.env.环境变量名）

打印后发现：环境变量是一个对象，对象中包含当前环境的环境配置文件相关信息（当前是开发环境则显示NODE_ENV: "development"，读取环境为development的环境变量值）。“BASE_URL”和“NODE_ENV”是文件内置的两个变量，所以会一并被读取。

那怎么切换不同的路径呢？通过运行package.json文件中不同命令运行不同环境。

npm run dev -----自动读取.env.development文件

npm run build:prod-----自动读取.env.production文件

npm run build:stage-----自动读取.env.staging文件

tips:打包命令后面跟一个参数“---mode 参数”，可以指定要读取的环境变量文件（如"build:stage": "vue-cli-service build --mode staging",当运行npm run build:stage时，会指定读取.env.starting环境变量文件）

为什么只有"build:stage": "vue-cli-service build --mode staging"后面需要跟--mode staging呢？因为"build:prod"&"build:stage"会执行相同的命令"vue-cli-service build"，则会读取相同的变量文件。为了区分，需要在"build:stage": "vue-cli-service build --mode staging"添加--mode staging。