在Vue项目开发过程中，我们通常需要通过console来输出日志信息，协助我们进行代码调试，但是对于线上发布时，不能输出日志。可以通过vue.config.js配置在打包时统一删除console日志。

方法1： 如果需要根据打包环境来判断是否需要删除：

// vue.config.js
module.exports = {
...
configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
  },
}

方法2： 通过配置configureWebpack的方式

// vue.config.js
const TerserPlugin = require('terser-webpack-plugin');

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

TerserPlugin 插件不需要install可以直接使用，因为Vue-cli也在使用。

TerserPlugin 插件不需要install可以直接使用，因为Vue-cli也在使用。

有些使用的UglifyJsPlugin插件，可能会出现兼容性问题，推荐使用TerserPlugin。

方法3：配置.eslintrc.js文件

注意这里是规则校验，即禁止输入console，并非剔除。

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
    // 这里是去除 eslint 文件命名报错，如 index.vue 命名不规范会报错
  overrides: [
    //这里是添加的代码
    {
      files: ['src/views/index.vue', 'src/views/**/index.vue'],   // 匹配views和二级目录中的index.vue
      rules: {
        'vue/multi-word-component-names': "off",
      } //给上面匹配的文件指定规则
    },
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

方法4：：配置babel.config.js文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      'plugins': ['dynamic-import-node']
    },
    'production': {
      'plugins': ['transform-remove-console']
    }
  }
}