Vue 开发中如何屏蔽 Console 日志

在 Vue 开发中，经常会使用 console 打印调试信息，但在生产环境中这些日志会影响代码性能和安全性。本文介绍如何使用 webpack 插件在生产环境中屏蔽 console 日志。

步骤：

安装插件：

npm install --save-dev uglifyjs-webpack-plugin

修改 webpack.prod.conf.js 文件：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          'drop_console': true, // 屏蔽 console
          'drop_debugger': true
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    })
  ]
}

重新打包部署：

完成以上步骤后，重新打包部署项目即可。在生产环境中，所有 console 日志都会被自动屏蔽。

注意：

使用该方法屏蔽 console 日志后，生产环境中将无法使用 console 打印调试信息。
建议在开发环境中使用 console 打印调试信息，并在发布前使用该方法屏蔽 console 日志。