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 相关文章推荐
vuex的数据渲染与修改浅析
Nov 26 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue的过滤器你真了解吗
Feb 24 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
递归列出所有文件和目录
2006/10/09 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
Jquery attr("checked") 返回checked或undefined 获取选中失效
2013/10/10 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python的concat等多种用法详解
2018/11/28 Python
Python timeit模块的使用实践
2020/01/13 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
个人委托书怎么写
2014/04/04 职场文书
旅游安全协议书
2014/04/21 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
保送生自荐信
2015/03/06 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL