vue项目打包清除console.log的4种方法
4种打包清除console.log的方法
·
记录一下项目中碰到的小问题,打包清除console.log的方法,vue2,vue-cli5.0.0(得注意一下自己项目的vue-cli版本)
-
第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 () {}; } }
更多推荐
已为社区贡献1条内容
所有评论(0)