记录一下项目中碰到的小问题,打包清除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 () {};
      }
    }
    
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐