vue cli3 优化配置生产去除console.log - from UglifyJs `warnings` is not a supported option-优快云博客

本文解决VueCLI3.x配置生产环境移除console.log的错误，介绍使用TerserWebpackPlugin替代UglifyJSPlugin的方法，实现生产环境构建时移除console日志。

使用 vue cli 3.x 配置生产去除 console.log 时出现了报错，如下，

写法一：

// vue.config.js

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

出现报错 UglifyJs
DefaultsError: warnings is not a supported option
在这里插入图片描述

写法二：

// vue.config.js

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_debugger: true, // console
              drop_console: true,
              pure_funcs:['console.log'] // 移除console
            },
          },
          sourceMap: false,
          parallel: true,
        })
      )
    }
  },
}

出现报错 warnings is not a supported option
在这里插入图片描述
可见使用 uglifyjs-webpack-plugin 在这里无法实现去除控制台的信息。

使用 terser-webpack-plugin 代替，实现生产去除 console.log

// vue.config.js

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log'] // 移除console
            }
          },
        }),
      ]
    }
  },
}