Vue cli中模式和环境变量

Vue CLI 项目有三个模式：

• development模式   开发环境
• test模式   测试环境
• production模式   生产环境

可在构建命令中使用开发环境变量：（使用其他环境同理，改变development即可）

vue-cli-service build --mode development

NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试。

环境变量：

项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

一个环境文件只包含环境变量的“键=值”对：

# 开发
VUE_APP_BASE_API = '/dev'

注意：变量只能以以下三种形式作为开头：

NODE_ENV
BASE_URL 
VUE_APP_

 被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用

定义之后，如何访问呢？

可以在你的代码任何一个地方使用 process.env来获取环境变量 ！因为process是Nodejs提供的一个全局变量，它会根据你当前的环境，自动读取你先前定义，对应的环境变量文件中的内容 如.env.development里面的所有内容。无需引入

console.log(process.env.VUE_APP_BASE_API)    //'/dev'

使用场景： 

常常在项目中使用proxy代理时，将静态的target值指向一个环境变量，后期维护或当后端服务器地址变化时更改方便，只需在对应的.env文件中需改环境变量的值即可，无需更改原本的代码。