Vue打包时候build移除所有的console打印

原创已于 2022-04-20 08:58:29 修改 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2020-09-21 11:50:51 首次发布

Vue 专栏收录该内容

198 篇文章

订阅专栏

本文介绍如何使用 babel-plugin-transform-remove-console 插件，在构建过程中删除 Vue 项目的控制台日志，以减小生产环境包体积并提高安全性。文中详细展示了配置方法及如何根据环境变量选择性地应用此插件。

推荐插件：babel-plugin-transform-remove-console

Install：

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

通过.babelrc （推荐） vue-cli3.0/babel.config.js中定义plugins：[]


// without options   这个就可以
{
  "plugins": ["transform-remove-console"]
}

// with options
{
  "plugins": [ ["transform-remove-console", { "exclude": [ "error", "warn"] }] ]
}

module.exports = {
  'presets': [
    '@vue/app'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ],
    transform-remove-console
  ]
}

如果只想在发布阶段生效，开发阶段不生效，需要判断：

// 项目开发阶段用到的babel插件
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  'presets': [
    '@vue/app'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ],
    // 发布产品时候的插件数组
    ...prodPlugins
  ]
}

关注博主即可阅读全文