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

  1. 写法一:
// 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

在这里插入图片描述

  1. 写法二:
// 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
            }
          },
        }),
      ]
    }
  },
}
Logo

前往低代码交流专区

更多推荐