1. 引言
在前面的章节，已经讲解了部分vue-element-admin的知识：
- 《Vue项目实战（01）-vue-element-admin项目结构分析》
- 《Vue项目实战（02）-Vuex状态管理模式》
- 《Vue项目实战（03）-alias》
- 《Vue项目实战（04）-axios封装》
本文主要讲解vue项目的多环境配置。
2. 多环境配置
2.1 环境配置文件
多环境配置文件的命名规则（必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件）：
.env：全局默认配置文件，不论什么环境都会加载合并.env.development：开发环境下的配置文件.env.production：生产环境下的配置文件
配置文件内容的规定：
- 属性名必须以
VUE_APP_开头，比如VUE_APP_XXX
2.2 文件加载顺序
根据启动命令
vue会自动加载对应的环境，vue是根据文件名进行加载的，所以上面说“不要乱起名，也无需专门控制加载哪个文件”。
注意：
- 执行
npm run serve命令，会自动加载.env.development文件 .env文件无论是开发还是生成都会加载的公用文件- 也就是
.env.development文件覆盖掉了.env文件的NOOE_ENV选项
3. 案例
3.1 新建多环境配置文件
首先定义三个环境的配置文件，如下：
内容如下:
| .env.development | .env.production | .env.staging |
 |
 |
 |
3.2 配置多环境
在packaging.json里配置对应的几个环境：
3.3 运行验证
首先在main.js里写打印当前环境的代码，内容如下：
console.log(process.env.NODE_ENV);
我们知道，程序运行时，会默认读取.env.development里的配置，所以，我们可以在.env.development文件里配置要运行的环境。比如，要配置当前环境为生产production，那么.env.development文件内容为：
NODE_ENV = production # just a flag ENV = 'development' # base api VUE_APP_BASE_API = '/dev-api'
启动程序，浏览器可以看到控制台打印为"production"：
同理，把NODE_ENV改为staging，运行程序，控制台打印为：
3.4 构建验证
执行构建 生产环境 命令：
npm run build:prod
可以看到，正在构建生产环境：
类似的，执行staging环境:
npm run build:stage
可以看到正在构建staging环境：
4. 小结
本文主要讲解的是vue项目的多环境配置。
在这里需要注意的一点是，vue项目在本地只能运行development环境，其它环境不能运行。
本文完！
