Vue项目优化 —— 移除console

开发阶段，我们往往会编写大量的 console 语句用于测试。但是项目上线时，需要统一对这些 console 进行移除，所以需要专门的插件来删除掉 console。

移除 console 需要用到插件 babel-plugin-transform-remove-console

一、具体步骤

1.安装依赖

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

2.在 babel.config.js 进行配置

二、关键代码

//这是项目发布阶段需要用到的 babel 插件
const prodPlugins = []
//发布阶段，则向 'prodPlugins'数组中加入插件 'transform-remove-console'
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    //发布产品时的插件数组
    ...prodPlugins  //巧妙利用展开运算符
  ]
}

三、打包

此时，再运行 npm run build打包，就会移除代码中所有的 console