技术分享 Technology to share

vue cli 也要读配置文件

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


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