VueJS 2: How To Remove Console.log from Production Builds?

Question

In IE, console is only defined when in F12 debugging mode. So I'm looking for a convenient way to manage the compilation of Vue

I'd like to be able to write console.log inside the code

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

If i compile in production mode, the command console must disappear

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

If i work in develope mode, the command console must appear

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

In VueJS, I have two webpack configurations: one for development and one for production - could this be the way?

I can not configure the webpack file correctly, but I think it's something like this:

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 solution didn't work for me but this did (vue cli 3.0):

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

babel.config.js file:

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

Answer 2

If you are using vue-cli 3 you can install a babel plugin for that with npm install babel-plugin-transform-remove-console --save-dev and add the following configuration to your babel.config.js file:

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

There are other answers for older versions of vue-cli in the source link

Source: https://forum.vuejs.org/t/remove-console-logs-from-production-buils/39327

Answer 3

Open build > webpack.prod.conf.js under "plugins" array for UglifyJsPlugin you need to add drop_console: true under compress option.

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    drop_console: true <----- ADD THIS LINE
  },
  sourceMap: true
})