深入浅析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 相关文章推荐
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
PHP getName()函数讲解
2019/02/03 PHP
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python3实现名片管理系统
2020/11/29 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Python-opencv 双线性插值实例
2020/01/17 Python
10个顶级Python实用库推荐
2021/03/04 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
英语专业自荐书
2014/06/13 职场文书
关爱残疾人标语
2014/06/25 职场文书
大学生年度个人总结
2015/02/15 职场文书
2019年入党思想汇报
2019/03/25 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技