深入浅析vue中cross-env的使用


Posted in Javascript onSeptember 12, 2019

cross-env

cross-env是跨平台设置和使用环境变量的脚本。

在大多数Windows命令行中在使用NODE_ENV = production设置环境变量时会报错。同样,Windows和Linux命令如何设置环境变量也有所不同。

使用 cross-env 可以设置在不同的平台上有相同的NODE_ENV参数。

使用

安装

npm install cross-env --save-dev
package.json
"scripts": {
  "serve": "cross-env NODE_ENV=development vue-cli-service serve --open",
  "build": "cross-env NODE_ENV=production vue-cli-service build"
}

development
production

process为node的全局变量

适用场景

适用于本地线上环境有差异的场景,例如本地线上使用不用的开发域名则可以通过 NODE_ENV 来判断

if(process.env.NODE_ENV!='development'){
  //线上环境
}

知识点扩展:cross-env使用笔记

cross-env能跨平台地设置及使用环境变量

大多数情况下,在windows平台下使用类似于: NODE_ENV=production的命令行指令会卡住,windows平台与POSIX在使用命令行时有许多区别(例如在POSIX,使用$ENV_VAR,在windows,使用%ENV_VAR%。。。)

cross-env让这一切变得简单,不同平台使用唯一指令,无需担心跨平台问题

npm安装方式

npm i --save-dev cross-env

在npm脚本(多是package.json)里这么配置

{
 "scripts": {
  "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
 }
}

运行npm run build,这样NODE_ENV便设置成功,无需担心跨平台问题

总结

以上所述是小编给大家介绍的vue中cross-env的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
layui form表单提交之后重新加载数据表格的方法
Sep 11 #Javascript
layer弹出层显示在top顶层的方法
Sep 11 #Javascript
layer.js之回调销毁对话框的例子
Sep 11 #Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 #Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 #Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 #Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 #Javascript
You might like
PHP的分页功能
2007/03/21 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP多态代码实例
2015/06/26 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
js 与或运算符 || && 妙用
2009/12/09 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Python金融数据可视化汇总
2017/11/17 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
基于python实现从尾到头打印链表
2019/11/02 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
python 制作简单的音乐播放器
2020/11/25 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
后勤人员自我鉴定
2013/10/20 职场文书
大学毕业感言100字
2014/02/03 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
2015年教务主任工作总结
2015/07/22 职场文书