阅读 434

vue项目打包发布时去除所有console

写项目的时候个人习惯会写很多的console,测试环境还好,生产环境被人看到就不好了,一个个去除也太麻烦

这个插件可以解决发布时候的问题 babel-plugin-transform-remove-console

先安装插件

yarn add babel-plugin-transform-remove-console

复制代码

安装完成后项目目录会新增一个 babel.config.js 的文件,在此文件中新增 transform-remove-console 即可,如下图:

20210629101747390.png

个人配置保留错误和警告

// 所有生产环境
const prodPlugin = []

if (process.env.NODE_ENV === 'production') {
  
// 如果是生产环境,则自动清理掉打印的日志,但保留error 与 warn
  prodPlugin.push([
    'transform-remove-console',
    {
      // 保留 console.error 与 console.warn
      exclude: ['error', 'warn']
    }
  ])
}

module.exports = {
  plugins: [
    ...prodPlugin
  ],//到这里就可以了
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      'plugins': ['dynamic-import-node']
    }
  }
}

复制代码
文章分类
前端
文章标签