16

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
 }),
])
2
  • If production env is present you can simply console.log=function(){}; Is no the better answer, but can help. will no log nothing Nov 16, 2018 at 6:35
  • That's a clever solution @EricOcampo. It would work, however, the best approach is to have those lines of code removed from the build bundle altogether by configuring Webpack build process to do it automatically for you. Feb 13, 2020 at 7:34

7 Answers 7

34

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

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

0
2

Vue CLI 3 / 4

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

In babel.config.js:

module.exports = {
  presets: [
    'airbnb'
  ],
  plugins: [
    ...process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : []
  ],
};
1

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
})
1

Camilos solution didn't worked for me but was a good hint. After some investigation the problems seems to be the process.env.NODE_ENV that isn't filled/defined as expected.

I am having my own enviroment files in my vue application that are named:

  • .env (for local enviroment)
  • .env.devlopment (for dev machine)
  • .env.test (for prel)
  • .env.production (of course for production)

Each of this env-files contains these properties:

VUE_APP_STAGE=production
VUE_APP_REST_BASE_URL=http://prodapp/rest
VUE_APP_NOTIFICATION_DURATION_MS=10000

I build our application e.g. with npm run build -- --mode development or npm run build -- --mode local. The last parameter specifies the enviroment and leads to the switch between the mentioned enviroment files.

I solved the problem for avoiding console outputs in production build with modifying the babel.config.js in that way:

const plugins = [];

//remove console outputs in production enviroment!
if (process.env.VUE_APP_STAGE === 'production') {
    plugins.push('transform-remove-console')
}

module.exports = {
    presets: [
        '@vue/app'
    ],
    plugins: plugins
}
0

Here's my babel.config.js when using Vue CLI 4 babel plugin @vue/cli-plugin-babel:

/* eslint-disable no-var */
module.exports = (api) => {
  var isProd = api.cache.invalidate(() => process.env.NODE_ENV === 'production');
  var plugins = [];
  if (isProd) {
    plugins.push(['transform-remove-console', { exclude: ['error', 'warn', 'info'] }]);
  }
  return {
    presets: ['@vue/cli-plugin-babel/preset'],
    plugins,
  };
};

Install the package as a dev dependency: npm i -D babel-plugin-transform-remove-console

-13

You can't remove the log statements as far as I know. What you can do is wrap them in conditionals:

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

Then like you mentioned, set the debug variable in your webpack configuration.

debug = process.env.PRODUCTION !== true

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.