这是基于cli3.x版本的环境变量配置指南。没有过多复杂的介绍,只有极简的实用配置。旨在给需要的朋友提供帮助以及自己温故知新,真正一看就会懂,懂了就能用。
配置环境变量的目的
项目开发过程中,至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同,若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生,我们只需做简单的配置,把环境状态切换的工作交给代码。
配置步骤
1. 首先在项目根目录下(与package.json同级)新建三个".env"文件
如上,三个".env"文件后缀名为development、production、test,分别对应为开发环境、生产环境和测试环境
.env.development
.env.production
.env.test
2. 配置package.json文件
在 vue-cli-service 命令后加上对应".env"文件名字。配置完成后,当我们运行
npm run xxx
命令时会执行对应的".env"文件。从而实现环境变量配置功能。
3. 使用配置的环境变量
配置vue.config.js文件
在根目录下新建 “vue.config.js” 文件,并打印 process.env.VUE_APP_SERVER_URL
的内容,然后运行npm run serve
命令。可以看到命令行在执行“vue-cli-service serve”的同时加上了“--mode development”,紧接着输出了“.env.development”文件内的接口地址————“http://development”。说明此时我们的环境变量已经配置成功了!
接下来运行npm run build
命令
我们发现命令行执行了“vue-cli-serve build”的同时加上了“--mode production”,并且输出的接口地址也对应更改了。再看左侧目录下新增了一个打包后的文件夹。再次说明我们的环境变量已经配置成功了!
最后再极其不愿的执行npm run test
命令
呐,同样做了对应的输出与更改。至此,我们的vue环境变量配置圆满成功!
需要注意,在使用的时候记得调用
process.env
变量哦
顺便一提,在生产环境下记得设置productionSourceMap值为false,以减少打包后的项目体积(大概能减少百分之六七十左右),这只是vue项目优化的一个点,此处不做过多讲解,有关项目优化内容下次再单独写一篇文章。
2.x
var root = process.env.NODE_ENV=='production'?'生产':'开发'
结语
-
".env"文件命名不一定非要development、production、test。是可以自定义的,前提是得在package.json里面做对应的名称修改!(注意命名要语义化方便理解)
-
详情参照cli官方文档
-
感谢大家支持,若有不足或错误的地方请多指正。
喜欢博主的可以点赞关注一下
长得美的,长得帅的都关注了
现在就差你了
还不长按关注一下
----------------- END -----------------