深入浅析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输入城市查看地图使用介绍
May 08 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
在node中如何使用 ES6
Apr 22 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
原生JavaScript实现随机点名表
Jan 14 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 快速生成 Flash 动画的方法
2007/03/06 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
使用python接入微信聊天机器人
2020/03/31 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
工作时间上网检讨书
2014/02/03 职场文书
酒店节能降耗方案
2014/05/08 职场文书
机械操作工岗位职责
2014/08/08 职场文书
道德模范事迹材料
2014/12/20 职场文书