vue cli 3.0 文件压缩如何去掉console.log

Question

期望vue 打包之后，项目里面调试信息console.log 可以自动去掉。
我在vue.config.js 文件的配置项增加了这一部分

configureWebpack:{
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true,//console
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
      })
    ]
    }
  }

然而并没有看期望效果。

Answer 1

我试了一下，还是不行啊，到底怎么弄的？？？

Answer 2

wepack4还需要在外层加一项，完整写法：
configureWebpack: {

optimization: {
  minimizer: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          drop_console: true, //console
          drop_debugger: false // pure_funcs: ['console.log']移除
        }
      }
    })
  ]
}

},

Answer 3

先确定当前版本的 @vue/cli 是否使用的是 webpack 4，如果是的话参考
https://github.com/vuejs/vue-...
https://github.com/vuejs/vue-...

Answer 4

https://segmentfault.com/a/11...

使用babel-plugin-transform-remove-console插件

安装依赖库

$ npm install babel-plugin-transform-remove-console --save-dev
# or
$  yarn add babel-plugin-transform-remove-console --dev

【babel.config.js】配置如下

const plugins = ["@vue/babel-plugin-transform-vue-jsx"]
// 生产环境移除console
if(process.env.NODE_ENV === 'production') {
  plugins.push("transform-remove-console")
}
module.exports = {
  plugins: plugins,
  presets: [
    [
      '@vue/app', {
        modules: false,
        targets: {
          browsers: ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4", "iOS >= 8"]
        },
        useBuiltIns: 'entry',
      }
    ]
  ]
}

我用该方案成功了，如果你也成功了，给个赞?

Answer 5

配置是对的，我也是按这种方法写的。但是还要在vue.config.js 最上方require这个插件。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');然后直接打包就可以了。

Answer 6

vue.config.js

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
  }
  必须添加环境判断代码，因为development环境下config.optimization是undefined