已经有一个月没写博客了，倒还真不是我忘了这个博客；反而我自己的这个博客曾多次作为我自己的“学习网站”观摩学习；那为什么这么长时间没更新博文了呢？倒还真不是我没啥可以霍霍的东西了，主要是打工人都懂得；年底这一段时间，是非常忙的；各种资本家国家节日民间节日撞一块了？不信？我来给你列一列：首先，十一黄金周、双十一、双十二、然后很快哈，圣诞节（12月25日），然后圣诞节很快啊，过完了就是元旦（2022年1月1日），到元旦姑且算是消停了；这时候肯定会有机制的小伙伴会问了，嘿！的确哈！那跟你有啥关系呢？的确跟我没关系，但跟“金主爸爸”有关系啊，金主爸爸说：哎！马上国庆了，办个活动；哎！马上双十一了，来个轰动；哎！马上双十二了，来个活动...

我想说的

这时候肯定又有机制了小伙伴会问了，你屁话这么多；跑题了，你还没说标题的解决方案呢！嗯！的确，我的确还没说，我这不是为了凑字数了，既然诚心诚意的水博文，就要水的想那么一回事~

需求

首先正如这个标题所说，在 vue 的脚手架项目（具体见：https://cli.vuejs.org/zh/guide/），如何实现在开发模式下（development）可以正常在控制台打日志（console.log），而打包后的正式环境（production），则不显示控制台呢？（打包前并没有物理删除或者注释console相关代码）

解决方案

其实非常简单，你只需要装一个 babel-plugin-transform-remove-console，然后配置一下 babel.config.js 就好了，当然我知道我这么说肯定有机智的小伙伴还不会！没事！上配置！

package.json

安装 babel-plugin-transform-remove-console 包，安装方式有很多，比如 npm/cnpm/yarn 等等

{
  "devDependencies": {
    "babel-plugin-transform-remove-console": "^6.9.4"
  }
}

babel.config.js

修改 babel.config.js 内容，添加 transform-remove-console 插件支持，参考配置如下：

// 设置插件数组
const plugins = [];

// 根据环境变量决定插件数组内包含哪些插件
switch (process.env.NODE_ENV) {
    case "development":
        break;
    case "production":
        plugins.push("transform-remove-console")
        break;
}

// 导出配置
module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins
}

这个时候肯定会有眼见的小伙伴又发现了！哎！博主啊！你那个 process.env.NODE_ENV 的 “变量” 从哪里来的啊！如果你能问出这个级别的问题，那么我就可以很负责任的说，你对vue脚手架真的不熟！这个东西叫做“环境变量”，具体可参考：https://cli.vuejs.org/zh/guide/mode-and-env.html，其中，process.env.NODE_ENV 是 “内置的环境变量”，值为 development 或 production，用于区分当前页面运行在“开发模式”还是“生产模式”，对！就是这么简单！