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
 }),
])

If production env is present you can simply console.log=function(){}; Is no the better answer, but can help. will no log nothing — Eric Ocampo, Nov 16 '18 at 06: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. — ux.engineer, Feb 13 '20 at 07:34

t-MURO · Answer 1 · 2020-05-15T07:19:23.210

36

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

edited May 15 '20 at 07:19

answered Nov 15 '18 at 19:07

t-MURO

642
5
10

score 14 · Answer 2 · answered Nov 07 '18 at 15:16

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

peerbolte · Answer 3 · 2020-12-23T14:58:47.497

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'] : []
  ],
};

edited Dec 23 '20 at 14:58

answered Dec 23 '20 at 14:41

peerbolte

1,169
11
19

score 1 · Answer 4 · edited Feb 13 '20 at 18:25

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

edited Feb 13 '20 at 18:25

ux.engineer

10,082
13
67
112

answered Aug 01 '19 at 13:47

Vikas Dwivedi

5,233
1
21
16

phil · Answer 5 · 2020-06-10T04:36:57.723

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
}

ux.engineer · Answer 6 · 2020-02-25T08:04:02.277

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

score -13 · Accepted Answer · answered Jan 29 '18 at 14:08

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

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

7 Answers7