[JavaScript知识库]将Vue2中的console.log()调试信息移除

1. 安装babel-plugin-transform-remove-console插件

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

2. 在babel.config.js配置文件中加入配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [ // 加入以下内容，引入插件。
    'transform-remove-console'
  ]
}

将上述plugins插件的引入配置注释掉，重新npm run serve之后，console.log()的输出将恢复。上述的配置将不区分开发模式development，或者发布模式production。一般适用于开发时。

3. 控制只在发布文件中移除console.log()的输出

配置babel.config.js文件

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [ // 原有的默认配置
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: prodPlugins
}

在 npm run build 之后生成的dist/中的文件将自动移除console.log()的输出语句。一般用于发布项目时使用。

创作挑战赛

新人创作奖励来咯，坚持创作打卡瓜分现金大奖