VueJS 2：如何从生产版本中删除 Console.log？

Question

在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 中，我有两种 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

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

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

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

debug = process.env.PRODUCTION !== true

Answer 2

如果您使用的是 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 的其他答案 link

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

Answer 3

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

Answer 4

打开 build > webpack.prod.conf.js under "plugins" array for UglifyJsPlugin 您需要在压缩选项下添加 drop_console: true。

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

Answer 5

这是我的 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

Answer 6

Camilos 解决方案对我不起作用，但它是一个很好的提示。经过一些调查，问题似乎是 process.env.NODE_ENV 而不是预期的 filled/defined。

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

.env（本地环境）
.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。最后一个参数指定环境并导致在提到的环境文件之间切换。

我通过修改 babel.config.js 解决了在生产构建中避免控制台输出的问题：

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
}

Answer 7

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

VueJS 2：如何从生产版本中删除 Console.log？

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

compilation

console.log

webpack

vuejs2