Vue JS 2 Comment supprimer Console.log de la production

Question

Dans IE, la console n'est définie que lorsque le mode de débogage F12 est activé. Je suis donc à la recherche d'un moyen pratique de gérer la compilation de Vue

J'aimerais pouvoir écrire console.log à l'intérieur du code

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

Si je compile en mode production, la console de commande doit disparaître

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

Si je travaille en mode développement, la console de commande doit apparaître

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

Dans vue js, j'ai 2 configurations de webpack : une pour le développement et une pour la production

Est-ce que cela pourrait être la solution ?

Je n'arrive pas à configurer le fichier webpack correctement, mais je pense que c'est quelque chose comme ça :

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

La solution de Camilos n'a pas fonctionné pour moi mais celle-ci a fonctionné (vue cli 3.0) :

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

le fichier babel.config.js :

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

Answer 2

Si vous utilisez vue-cli 3, vous pouvez installer un plugin babel pour cela avec npm install babel-plugin-transform-remove-console --save-dev et ajoutez la configuration suivante à votre babel.config.js fichier :

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

Il y a d'autres réponses pour les anciennes versions de vue-cli dans le lien source

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

Answer 3

Ouvrir construire > webpack.prod.conf.js sous le tableau des "plugins" pour UglifyJsPlugin vous devez ajouter drop_console: true sous l'option de compression.

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

Answer 4

Pour autant que je sache, vous ne pouvez pas supprimer les déclarations de journal. Ce que vous pouvez faire, c'est les envelopper dans des conditionnels :

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

Ensuite, comme vous l'avez mentionné, définissez la variable debug dans votre configuration webpack.

debug = process.env.PRODUCTION !== true