深入浅析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 相关文章推荐
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
jquery使用经验小结
May 20 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 Javascript
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文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
js确定对象类型方法
2012/03/30 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
python通过floor函数舍弃小数位的方法
2015/03/17 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
大四自我鉴定范文
2013/10/06 职场文书
更夫岗位责任制
2014/02/11 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
同意报考公务员证明
2015/06/17 职场文书
重阳节活动主持词
2015/07/04 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
Python的三个重要函数详解
2022/01/18 Python
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS