web-dev-qa-db-ja.com

VueJS 2:本番ビルドからConsole.logを削除する方法は?

IEでは、コンソールはF12デバッグモードの場合にのみ定義されます。だから私はVueのコンパイルを管理するための便利な方法を探しています

コード内にconsole.logを記述できるようにしたい

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

本番モードでコンパイルすると、コマンドコンソールが消える必要があります

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

開発モードで作業している場合は、コマンドコンソールが表示される必要があります

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

VueJSには、開発用と本番用の2つのWebpack構成があります。これが方法でしょうか?

Webpackファイルを正しく設定できませんが、次のようになります。

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

私の知る限り、ログステートメントを削除することはできません。あなたができることはそれらを条件文で包むことです:

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

次に、前述のように、webpack構成でデバッグ変数を設定します。

debug = process.env.PRODUCTION !== true
0
user320487

Vue-cli 3を使用している場合は、npm install babel-plugin-transform-remove-console --save-devを使用してそのためのbabelプラグインをインストールし、babel.config.jsファイルに次の構成を追加できます。

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

ソースリンクに古いバージョンのvue-cliに対する他の回答があります

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

3
camilo.forero

開くbuild> webpack.prod.conf.jsの「plugins」配列の下glifyJsPlugin圧縮オプションの下にdrop_console: trueを追加する必要があります。

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

camilosソリューションは私には機能しませんでしたが、これは機能しました(vue cli 3.0):

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

babel.config.jsファイル:

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

これが私のbabel.config.js使用時Vue CLI 4 babelプラグイン@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,
  };
};

パッケージを開発依存関係としてインストールします:npm i -D babel-plugin-transform-remove-console

0
ux.engineer