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 Elenent实现表格相同数据列合并
Nov 30 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue封装数字翻牌器
Apr 20 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 base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
jQuery 源码分析笔记
2011/05/25 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
js字符串转成JSON
2013/11/07 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Python2和Python3.6环境解决共存问题
2018/11/09 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
物业管理计划书
2014/01/10 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
会计岗位描述
2014/02/22 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
六年级作文之关于梦
2019/10/22 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
Java基于字符界面的简易收银台
2021/06/26 Java/Android
java解析XML详解
2021/07/09 Java/Android
sql注入报错之注入原理实例解析
2022/06/10 MySQL