vue打包时去掉所有的console.log


Posted in Vue.js onApril 10, 2022

vue打包去掉所有的console.log输出

安装插件

npm install babel-plugin-transform-remove-console --save-dev

添加配置

安装babel-plugin-transform-remove-console开发依赖,然后在项目的babel.config.js的plugin中添加节点。再build就不会有console警告了。

如下配置无论在开发环境还是生产环境都会去掉所有的console输出语句。

vue打包时去掉所有的console.log

但是babel.config.js文件是全局共享的,无论是开发阶段还是生产阶段,都会移除所有的console,我们想在开发阶段保留console该怎么做呢?

如下:

vue打包时去掉所有的console.log

代码:

// 项目在发布时需要用到的babel插件数组
const proPlugins = [];
// 如果当前是生产环境,则使用去掉console的插件
if (process.env.NODE_ENV === 'production') {
    proPlugins.push('transform-remove-console');
}
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins:[
    ...proPlugins
  ]
}

vue npm run build 打包去掉console和警告

在本地开发环境中肯定都会去打印一些数据,但是你如果上传到正式环境呢这些肯定不能再有了,但是你也不能一行一行的去注释掉吧,这样很麻烦所以vue在配置的时候其实是有这个配置的但是需要你自己去配置文件里面修改一下,这样才能方便你的开发二可以达到偷懒的地步。下面就说一下这个配置吧

其实就两行代码就可以了 

vue打包时去掉所有的console.log

在build下面的webpack.prod.conf.js里面找到这里添加上

drop_console: true,
pure_funcs: [‘console.log']

这两句就可以完美解决了。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 

Vue.js 相关文章推荐
对vue生命周期的深入理解
Dec 03 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 #Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 #Vue.js
vue实力踩坑之push当前页无效
Apr 10 #Vue.js
vue实现Toast组件轻提示
Apr 10 #Vue.js
vue自定义右键菜单之全局实现
Apr 09 #Vue.js
vue判断按钮是否可以点击
Apr 09 #Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 #Vue.js
You might like
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
c#中的实现php中的preg_replace
2009/12/21 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
简单的php购物车代码
2020/06/05 PHP
修改发贴的编辑功能
2007/03/07 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
利用python代码写的12306订票代码
2015/12/20 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
大学生自我鉴定范文
2013/12/28 职场文书
投标单位介绍信
2014/01/09 职场文书
演讲主持词
2014/03/18 职场文书
求职自我推荐信
2015/03/24 职场文书
刑事法律意见书
2015/06/04 职场文书
电影雷锋观后感
2015/06/10 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书