CODEWITHSUNDEEP
webpackcompilationvuejs2console.log
Janka
Janka

Reputation: 1988

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

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

Upvotes: 18

Views: 21335

Answers (7)

peerbolte
peerbolte

Reputation: 1199

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

Upvotes: 2

phil
phil

Reputation: 1369

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
}

Upvotes: 1

t-MURO
t-MURO

Reputation: 671

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

Upvotes: 37

ux.engineer
ux.engineer

Reputation: 11368

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

Upvotes: 0

Vikas Dwivedi
Vikas Dwivedi

Reputation: 5311

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

Upvotes: 1

camilo.forero
camilo.forero

Reputation: 600

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

Upvotes: 15

user320487
user320487

Reputation:

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

Upvotes: -14

Related Questions