Vue JS 2如何从生产中删除Console.log

Question

在IE中，仅在F12调试模式下定义控制台。所以我正在寻找一种方便的方法来管理Vue的编译

我希望能够在代码内部编写console.log

alert('a');
console.log('only in develope mode');
alert('b');

如果我在生产模式下编译，则命令控制台必须消失

alert('a');
alert('b');

如果我在开发模式下工作，则必须出现命令控制台

alert('a');
console.log('only in develope mode');
alert('b');

在vue js中，我有2种webpack配置：一种用于开发，另一种用于生产

这可能是这样吗？

我无法正确配置webpack文件，但我认为是这样的：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports.plugins = (module.exports.plugins || []).concat([
 new UglifyJsPlugin({
  sourceMap: true,
  compress: {
    drop_console: true,
    warnings: false
  },
  comments: false
 }),
])

Answer 1

camilos解决方案对我不起作用，但确实有效（vue cli 3.0）：

npm i babel-plugin-transform-remove-console --save-dev

babel.config.js文件：

module.exports = {
  "presets": [...]
  ],
  "plugins": [...]
  ],
  "env":{
     "production": {
         "plugins": ["transform-remove-console"]
     }
  } 
} 

Answer 2

如果您使用的是vue-cli 3，则可以为此安装babel插件npm install babel-plugin-transform-remove-console --save-dev，并将以下配置添加到babel.config.js文件中：

const removeConsolePlugin = []
if (process.env.NODE_ENV === 'production') {
  removeConsolePlugin.push('transform-remove-console')
}
module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: removeConsolePlugin
}

在源链接中还有其他较旧版本的vue-cli的答案

来源：https：//forum.vuejs.org/t/remove-console-logs-from-production-buils/39327

Answer 3

据我所知，您无法删除日志语句。你可以做的是将它们包装在条件语句中：

if (debug === true) {
  console.log('dev')
}

然后就像您提到的那样，在 webpack 配置中设置调试变量。

debug = process.env.PRODUCTION !== true