VueJS 2:如何从生产版本中删除控制台.log

Question

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

我希望能够在代码中编写控制台.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

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 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 的答案

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

Answer 3

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 4

打开构建> webpack.prod.conf.js在 UglifyJsPlugin 的"plugins"数组下，您需要在压缩选项下添加drop_console: true。

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

Answer 5

Camilos 解决方案对我不起作用，但这是一个很好的提示。经过一些调查，问题似乎是未按预期填充/定义的process.env.NODE_ENV。

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

• .env(用于当地环境(
• .env.devlopment(适用于开发计算机(
• .env.test(用于预(
• .env.production(当然用于生产(

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

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 6

这是我

使用 Vue CLI 4 babel 插件@vue/cli-plugin-babel时的babel.config.js：

/* 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 7

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

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

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

debug = process.env.PRODUCTION !== true