vue读取properties_vue cli 也要读配置文件

前端小伙伴在项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段的请求的状态(如接口地址、端口号等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。所以多环境配置一直都是一件头疼不已的事情，于是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配置文件 获取对应值

♪(^∇^*) 现在可以愉快的玩耍了