Vue项目实战（05）-多环境配置

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环境，其它环境不能运行。

本文完！