vue-cli3 配置webpack打包时，注释console和debugger

最近，在新建的项目中，打包发布生产环境项目时，项目中没有注释掉的console语句会报error，虽然不影响最终的打包结果，但是终归看着不舒服。于是在网上几经查找，最终使用了下面的方案，得以解决。其实解决办法不麻烦，将下面的代码放入项目的vue.config.js中（vue-cli3的webpack配置基本都在这个文件）。代码加入以后，可以使用vue inspect --mode=p...

hd0722

4384人浏览 · 2019-10-30 10:26:33

hd0722 · 2019-10-30 10:26:33 发布

情景一：

最近，在新建的项目中，打包发布生产环境项目时，项目中没有注释掉的console语句会报error，虽然不影响最终的打包结果，但是终归看着不舒服。于是在网上几经查找，最终使用了下面的方案，得以解决。

其实解决办法不麻烦，将下面的代码放入项目的vue.config.js中（vue-cli3的webpack配置基本都在这个文件）。

代码加入以后，可以使用 vue inspect --mode=production > output.js 命令审查项目的 webpack 配置，该命令会在项目中输出一个output.js的文件。如果设置成功，那么可以在output文件中，看到drop_console: true等等的配置

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs =     ['console.log']
    }
  }
}

情景二：

对于项目中存在webpack.prod.conf.js这类文件的时候，可以直接在webpack.prod.conf.js(生产环境打包配置)中，找到

plugins ——>UglifyJsPlugin——>uglifyOptions，配置如下内容

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

文章参考：https://juejin.im/post/5c84b709e51d4578ca71dde4