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 相关文章推荐
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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
Javascript开发包大全整理
2006/12/22 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
原生js开发的日历插件
2017/02/04 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
JS判断时间段的实现代码
2017/06/14 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Python3中的bytes和str类型详解
2019/05/02 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
2013年高中生自我评价
2013/10/23 职场文书
办公室文秘岗位职责
2013/11/15 职场文书
上班迟到检讨书
2014/01/10 职场文书
小学数学教研活动总结
2014/07/01 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
初中毕业感言300字
2015/07/31 职场文书
公司转让协议书
2016/03/19 职场文书