vue-cli3.0 环境变量与模式配置方法


Posted in Javascript onNovember 08, 2018

vue-cli3.0移除了配置文件目录: config和build文件夹。可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢?

为什么需要配置环境变量和模式呢?

所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。

环境变量

cli-3.0总共提供了四种方式来制定环境变量:

1.在根目录添加.env文件,配置所有情况下都会用到的配置(不知道这个存在的意义,所有的都需要的也就不需要配置了吧)。

2.在根目录添加.env.local 文件,配置所有情况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。

3.在根目录添加.env.[mode] 文件,配置对应某个模式下的配置,比如:.env.development来配置开发环境的配置。

4.在根目录添加.env.[mode].local文件,配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效,该文件不会被git跟踪。

在文件中,我们只需要以key=value的方式就可以设置变量了。

例如:

FOO=bar
VUE_APP_SECRET=secret

环境变量的使用

设置完环境变量之后就可以在我们的项目中使用这两个变量了。不过还需要注意的是在项目的不同地方使用,限制也不一样。

1.在项目中,也就是src中使用环境变量的话,必须以VUE_APP_开头。例如我们可以在main.js中直接输出:console.log(process.env.VUE_APP_SECRET)

2.在webpack配置中使用,没什么限制,可以直接通过process.env.XXX来使用

3.在public/index.html中使用的:分三类:(没怎么用过)

<%= VAR %> 用于非转换插值 例如:`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >`
 <%- VAR %> 用于HTML转义插值
 <% expression %> 用于JavaScript控制流

模式

模式是Vue CLI项目中的一个重要概念。默认情况下,Vue CLI项目中有三种模式:

1.development:在vue-cli-service serve下,即开发环境使用

2.production:在vue-cli-service build 和vue-cli-service test:e2e下,即正式环境使用

3.test: 在vue-cli-service test:unit下使用

另外,如果你想要修改模式下默认的环境变量的话可以通过--mode来实现,例如:

 "dev-build": "vue-cli-service build --mode development"

有环境变量就能完成我们的需求了,为什么需要有模式的存在,这里我没查到详细的文档,个人认为模式是为了提供给第三方的插件一个辨识。例如vuex可以根据模式的不同,在development自动注入devtoolPlugin插件,利于开发,而在production中检测到错误不会进行console。

举例

说完了概念,可能还是比较模糊,可以试着添加一个stage环境,用来模拟预上线。

首先在package.json添加一种类型,并修改默认环境变量为stage环境变量

vue-cli3.0 环境变量与模式配置方法

在根目录下创建.env.stage文件,来声明变量:

vue-cli3.0 环境变量与模式配置方法

vue-cli3.0 环境变量与模式配置方法

这里声明的NODE_ENV = ‘production'用来表示这是生产环境。VUE_APP_CURRENTMODE为项目变量,outputDir为除数打包后文件的地址。
在vue.config.js中使用环境变量,制定输出文件为环境变量配置的文件:

vue-cli3.0 环境变量与模式配置方法

最后执行命令yarn stage能看到根目录下生成了stage文件:

vue-cli3.0 环境变量与模式配置方法

这样我们就配置完了stage环境。详细的项目地址可以参考:以vue-cli3.0为基础,结合vue-router、vuex、axios、iview组件库搭建一个工程化前端demo

参考文档:Environment Variables and Modes

总结

以上所述是小编给大家介绍的vue-cli3.0 环境变量与模式配置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
Vue实现点击当前行变色
Dec 14 Vue.js
详解如何创建并发布一个 vue 组件
Nov 08 #Javascript
webpack开发环境和生产环境的深入理解
Nov 08 #Javascript
webpack 开发和生产并行设置的方法
Nov 08 #Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 #Javascript
深入解析ES6中的promise
Nov 08 #Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 #Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 #Javascript
You might like
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
php 文件上传实例代码
2012/04/19 PHP
深入php处理整数函数的详解
2013/06/09 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python装饰器用法示例小结
2018/02/11 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
医者仁心观后感
2015/06/17 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang