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
}),
])
私の知る限り、ログステートメントを削除することはできません。あなたができることはそれらを条件文で包むことです:
if (debug === true) {
console.log('dev')
}
次に、前述のように、webpack構成でデバッグ変数を設定します。
debug = process.env.PRODUCTION !== true
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
開く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
})
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"]
}
}
}
これが私の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