vue-cli3.x 编译时清除console

目的

在我们开发Vue项目时, 时常需要使用console.log来输出一下调试信息, 在不对外的内部测试环境下这样是没有问题的, 但当使用npm build / yarn run build编译打包后调试信息依然存在, 这就有可能导致数据泄漏, 所以我们需要在预发布/生产编译时清除代码中的console.log, 开发环境下保留调试代码.

环境信息

• @vue/cli 3.5.1
• terser-webpack-plugin 1.3.0
• yarn 1.15.2

配置

在vue.config.js文件中配置如下:

const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true, // 清除console
            },
          },
        }),
      ],
    },
  },
}

结语

配置完成后, 我们就实现了开发模式下保留 console 调试信息, 预发布/生产模式下自动清除 console 调试信息了.

资料参考

如何在 vue.config.js 中配置 vue-cli3.0 打包之后不显示 console