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 相关文章推荐
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
vue实现全选和反选功能
Aug 31 Javascript
面包屑导航详解
Dec 07 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
webpack的移动端适配方案小结
Jul 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
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
js substr、substring和slice使用说明小记
2011/09/15 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
python妙用之编码的转换详解
2017/04/21 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
Python单例模式的两种实现方法
2017/08/14 Python
python利用tkinter实现屏保
2019/07/30 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
Python实现画图软件功能方法详解
2020/07/28 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
暑期实习鉴定
2013/12/16 职场文书
社区庆八一活动方案
2014/02/02 职场文书
高一新生军训感言
2014/03/02 职场文书
企业员工薪酬方案
2014/06/04 职场文书
公司保密管理制度
2015/08/04 职场文书
学校隐患排查制度
2015/08/05 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
解决 redis 无法远程连接
2022/05/15 Redis