vue项目打包怎么清除console.log

寻技术 VUE 2024年01月03日 124

这篇文章主要介绍“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 () {};
  }
}
关闭

用微信“扫一扫”