Vue CLI 去除console

498 阅读1分钟

Vue CLI 4

Vue CLI 4 默认使用的是 terser 插件来压缩和混淆 JavaScript 代码,配置drop_console来去除console

module.exports = {
    chainWebpack: (config) => {
        // TODO 打开此条注释,打包到prod环境除去所有console
        if (process.env.NODE_ENV === 'production') {
          config.optimization.minimizer('terser').tap((args) => {
            args[0].terserOptions.compress = {
              ...args[0].terserOptions.compress,
              drop_console: true, // 移除 console也可以传数组,只删除数组内的['log', 'info']
            };
            return args;
          });
        }
}

Vue CLI 3

Vue CLI 3 默认使用的是 UglifyJS 插件来压缩和混淆 JavaScript 代码,配置drop_console来去除所有console

vue.config.js(如果没有,就在项目根目录创建)

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_console: true
            }
          },
          extractComments: true,
          sourceMap: false,
          parallel: true
        })
      ]
    }
  }
};

只去除指定的console.log\console.info可以使用pure_funcs

vue.config.js(如果没有,就在项目根目录创建)

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_console: ['console.log','console.info']
            }
          },
          extractComments: true,
          sourceMap: false,
          parallel: true
        })
      ]
    }
  }
};