vue项目测试、生产环境，去除 console.log()

一、安装依赖

npm install babel-plugin-transform-remove-console -D

二、在 babel.config.js 文件中使用

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

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    // 发布产品时的插件数组
    // 项目发布阶段，去除 console.log()
    ...prodPlugins
  ]
}

注意：网上查资料很多答案是：

// 项目发布阶段，去除 console.log()
const prodPlugins = []
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'
      }
    ],
    // 项目发布阶段，去除 console.log()
    ...prodPlugins
  ]
}

运行就发现控制台报错，原因是 babel.config.js 写的按需引入 element-ui，与main.js的全部引入element-ui冲突！！！

解释一

1、在Babel的配置中，component是一个插件，它是babel-plugin-component的简写形式，他是一个用于按需引入组件库的Babel插件。

2、它告诉Babel使用babel-plugin-component插件，并传递了一些选项给插件，如libraryName和styleLibraryName。

解释二

1、libraryName 指定要按需引入的组件库的名称，按需引入Element UI组件库。

2、styleLibraryName指定要按需引入的组件库的样式库的名称。按需引入Element UI组件库的theme-chalk样式