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

期望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
            }
          }
      })
    ]
    }
  }

然而并没有看期望效果。

阅读 18.7k
6 个回答

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

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 

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',
      }
    ]
  ]
}
我用该方案成功了,如果你也成功了,给个赞?

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

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

},

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏