vue-cli配置环境变量的方法


Posted in Javascript onJuly 09, 2018

在实际项目开发中,经常会碰到需要环境变量的情景,在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production.用过vue-cli开发的通常对这个都不陌生,用这个最多的基本就是我们配置ajax请求的域名头了,

if (process.env.NODE_ENV === 'production') {
 axios.defaults.baseURL = 'http://customer.medsci.cn'
}

通常会有测试服务器和正式服务器环境之分,我们请求的域名也得区分,所以通过proces.env.NODE_ENV来区分环境变量,通过这个能够全局访问的参数,我们可以处理很多需要环境处理不同的操作.

上面的process.env.NODE_ENV是vue-cli默认配置的,有时候我们可能觉得光是只有一个开发环境和生产环境还不够,比如我们还想来一个测试坏境,这时候就需要自己定义了.以下以windows坏境为例,mac环境类似.

首先可以安装cross-env

npm install cross-env --save-dev

vue-cli的配置本质就是webpack的配置,当我们运行npm run dev 的时候,其实执行的是package.json中的scripts 的dev中 ,即build/dev-server.js 这里面一系列的配置启动整个服务.

vue-cli配置环境变量的方法

我们只想加一个环境变量,可以复制一份,在dev下加一个devtest命令:

"devtest": "cross-env TESTING=true node build/dev-server.js",

这样我们就可以通过npm run devtest也能启动整个服务了,注意上面的命令,我们加了一个TESTING=true ,这个就是加入的环境变量,TESTING:true, 通过上面的devtest的配置,我们可以运行npm run devtest像nppm run dev那样运行起来整个程序,不过我们发现,此时在项目中我们获取不到process.env.TESTING这个变量,这是为什么呢,如果是直接用webpack是可以的,经过查看,是在vue-cli的一系列配置文件中,已经写死了这些,不过我们可以改动加上

在根目录 config下,有dev.env.js和prod.env.js,这两个文件就是关键了,我们在NODE_ENV下面加一行TESTING:process.env.TESTING

module.exports = {
 NODE_ENV: '"production"',
 TESTING: process.env.TESTING
}

这时我们就能全局访问process.env.TESTING变量了,当我们npm run dev的时候,这个是undefined,当npm run devtest的时候是true, 同理我们可以添加一个npm run test命令, 与npm run build命令对应,加入打包测试的环境变量.

vue-cli的配置本质还是webpack的配置, 普通的webpack配置也可以采用此方法.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 #Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 #Javascript
使用async await 封装 axios的方法
Jul 09 #Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 #Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 #jQuery
JS实现图片旋转动画效果封装与使用示例
Jul 09 #Javascript
JavaScript的Object.defineProperty详解
Jul 09 #Javascript
You might like
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
解析php中heredoc的使用方法
2013/06/17 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php输入流php://input使用浅析
2014/09/02 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
python实现将内容分行输出
2015/11/05 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python和Go语言的区别总结
2019/02/20 Python
Django工程的分层结构详解
2019/07/18 Python
python3 实现口罩抽签的功能
2020/03/11 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
keras 权重保存和权重载入方式
2020/05/21 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
校园报刊亭的创业计划书
2014/01/02 职场文书
入党团支部推荐意见
2015/06/02 职场文书
外出听课学习心得体会
2016/01/15 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
浅谈Python numpy创建空数组的问题
2021/05/25 Python
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL