前端小伙伴在项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段的请求的状态(如接口地址、端口号等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。所以多环境配置一直都是一件头疼不已的事情，于是vue cli 环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。（又可以多出时间来研究怎么找“对象”了）
那我们便开始吧(๑•̀ㅂ•́)و✧
我们通过参考 https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F （vue cli 环境配置官网文档）
你可以替换你的项目根目录中的下列文件来指定环境变量：
.env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
env ？env是啥 (ノへ￣、)
.ENV
文件扩展名可以通过一个Adobe 字典数据 文件或一个WordPerfect环境文件中使用 （ https://www.reviversoft.com/file-extensions/env 一个可以查文件后缀信息的网站）
ENV文件是一个数据字典、格式是 ”键=值“
name = '夹击妹抖' website = 'www.hiwebpage.com' VUE_APP_AGE = 18
vue cli 读取配置文件也是存在优先级的。
Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写
为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
根据上面一段话我们可以得到一个关系 vue cli 自带的环境变量 > .env（一般） > .env.production（特定模式）高的优先级会覆盖低的优先级 这就和 css选择器关系类似。
接下来，看看vue cli提供的一个概念模式
模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：
development 模式用于 vue-cli-service serve （开发环境）
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e （生产环境）
test 模式用于 vue-cli-service test:unit （测试环境）
这三个是 vue cli自带的三种模式 在使用vue cli 创建vue项目就会有这三个模式 可以在 项目根目录 package.json -> scripts 找到他的踪影
他们每个模式都自带一些环境变量 然后cli api给你提供了一个 --mode 选项参数为命令行覆写默认的模式（根据文件.env.[mode]）
"dev-build": "vue-cli-service build --mode development",
那具体该如何使用呢
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：
console.log(process.env.VUE_APP_AGE) > 18
在我们编写代码时候 可以通过 process.env来读取 env配置文件 获取对应值
♪(^∇^*) 现在可以愉快的玩耍了
