Question

在IE中，控制台仅在F12调试模式下定义。所以我正在寻找一种方便的方法来管理Vue的编译

我希望能够在代码

中编写console.log

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

如果我在生产模式下编译，命令控制台必须消失

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

如果我在开发模式下工作，必须出现命令控制台

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

在vue js中，我有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
 }),
])

Answer 1

如果您使用的是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

Answer 2

camilos解决方案对我不起作用，但对我来说却有效（vue cli 3.0）：

webpack-dev-server

babel.config.js文件：

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

Answer 3

Camilos解决方案不适用于我，但这是一个很好的提示。经过一番调查后，问题似乎出在DaggerTestAppComponent.builder().application(app).build().inject(this) // This is on your TestClass未能按预期填充/定义。

我在vue应用程序中有自己的环境文件，名为：

TestClass（针对本地环境）
process.env.NODE_ENV（用于开发机）
.env（用于prel）
.env.devlopment（当然是生产版）

每个环境文件都包含以下属性：

.env.test

我构建我们的应用程序，例如.env.production或VUE_APP_STAGE=production VUE_APP_REST_BASE_URL=http://prodapp/rest VUE_APP_NOTIFICATION_DURATION_MS=10000。最后一个参数指定环境，并导致在提到的环境文件之间切换。

我通过修改npm run build -- --mode development来解决了在生产版本中避免控制台输出的问题：

npm run build -- --mode local

Answer 4

在 UglifyJsPlugin 的“插件”数组下打开 build > webpack.prod.conf.js ，您需要添加drop_console: true在“压缩”选项下。

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

Answer 5

使用 Vue CLI 4 babel插件babel.config.js时，这是我的@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

Answer 6

Vue CLI 3 / 4

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

在 babel.config.js 中：

module.exports = {
  presets: [
    'airbnb'
  ],
  plugins: [
    ...process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : []
  ],
};

Answer 7

据我所知，您无法删除日志语句。你可以做的是将它们包装在条件中：

debug = process.env.PRODUCTION !== true

然后就像你提到的那样，在webpack配置中设置调试变量。

import numpy as np
import scipy.optimize

def EV(q, P):
    return (-1)*np.sum(100 * q * (2*P - 1))

cons = {'type': 'eq', 'fun': lambda q: np.sum(q) - 1}
bds = [(0, 1), (0, 1), (0, 1), (0, 1), (0, 1), (0, 1), (0, 1), (0, 1), (0, 1), (0, 1), (0, 1), (0, 1)]
P = np.array([ 0.32510069,  0.96284943,  0.33966465,  0.61696874,  0.77368336,
0.10127222,  0.47836665,  0.87537657,  0.2086234 ,  0.52468426,
0.31931169,  0.86424427])

X0 = np.array([0.5,0,0,0,0,0,0,0,0,0,0.4,0])
qstar = scipy.optimize.minimize(fun = EV, x0 = X0, args = (P), method ='SLSQP', bounds = bds, constraints = cons)
print(qstar)

Vue JS 2如何从生产中删除Console.log

7 个答案: