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 相关文章推荐
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
AngularJS内置指令
Feb 04 Javascript
微信jssdk用法汇总
Jul 16 Javascript
jQuery事件对象总结
Oct 17 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
详解如何创建并发布一个 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实现mysql事务处理的方法
2014/12/25 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
python简单实现计算过期时间的方法
2015/06/09 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python自定义线程池实现方法分析
2018/02/07 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python计算n的阶乘的方法代码
2019/10/25 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
跟单文员的岗位职责
2013/11/14 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
新春联欢会主持词
2014/03/24 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
学习保证书怎么写
2015/02/26 职场文书
2016年五一促销广告语
2016/01/28 职场文书