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

Janka picture Janka · Jan 29, 2018 · Viewed 9.4k times · Source

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

t-MURO picture t-MURO · Nov 15, 2018

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"]
     }
  } 
}