这篇文章主要介绍“vue项目打包怎么清除console.log”,在日常操作中,相信很多人在vue项目打包怎么清除console.log问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目打包怎么清除console.log”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
第1种:
uglifyjs-webpack-plugin插件,配置在vue.config.js中,不支持es6,已归档,不再维护,不推荐,vue-cli3,4可行,vue-cli5中未生效。(我项目中未生效,不附代码,可自行搜索尝试)
第2种:
terser-webpack-plugin插件,配置在vue.config.js中,vue-cli5自带,vue-cli3,4需要下载插件,vue-cli3,4可行,vue-cli5中已无默认对应配置属性’drop_console’,自己添加后依旧未生效。(我项目中未生效,不附代码,可自行搜索尝试)
第3种:
babel-plugin-transform-remove-console插件,配置在babel.config.js中,vue-cli5实测可行,vue-cli3,4也可行。(尝试后,谷歌浏览器控制台仅websocket的打印输出未清除,其他打印输出都是清除干净了的)
下载依赖
npm install babel-plugin-transform-remove-console -D or yarn add babel-plugin-transform-remove-console -D
babel.config.js中
const proPlugins = []; // 判断环境 if (process.env.NODE_ENV === 'production') { proPlugins.push('transform-remove-console'); } module.exports = { plugins: [...proPlugins], };
第4种:
不用插件,main.js中判断生产环境后window.console.log = function (){};即可,vue-cli5实测可行,vue-cli3,4也可行。(尝试出来的效果是清除得最干净的,但不清楚这种侵入式覆盖的写法有啥弊端没有)
main.js中
// 正式环境清除所有console.log if (process.env.NODE_ENV === 'production') { if (window) { window.console.log = function () {}; } }