本文来自 「Vue虚拟实验」的小伙伴 jarbo，本节内容主要介绍了两种去除 console 的方法。通过打包机制去除 console 是大多数项目采用的方法。下面的“我”指作者本人。
在我们打包 Vue 项目的时候，经常会发现在浏览器的调试工具 console 中能够看到一些打印调试信息（console.log 输出），如果数目很少就还好，我们可以直接去源文件中注视掉再重新打包。可是当我们在项目中使用了很多的 console.log，又或者是项目中其他人的代码，我们并不想针对每一条输出信息去注释，这个时候就需要考虑一些替代方法，本文中列出了在打包时去除 console.log 信息的两种方式。
我最先想到的处理方式是在运行 console.log 之前先判断当前所处环境（process.env.NODE_ENV)，只有当环境为development 时，才输出console.log 的内容:
这样只有当前环境是 development 时 console.log 才会执行，我们只需要在所有的console.log前加上这一句逻辑就好了。再也不用打包前注释，开发时取消注释了。
好了，在我们给一百多行的 console.log 前加了判断条件之后，发现在当前环境是 staging 时如果也想看到 console.log 的结果时，又要修改这一百多行的逻辑，wtf。
如果有一种方法，既能根据当前的环境变量作为判断，也能不添加 console.log 前的逻辑判断有多好呢。
我们是否可以通过修改一下 console 的实现来达到这个目的呢？真的可以：
如果希望在整个项目中应用这个逻辑，只需要在 entry 中(src/main.js)添加以上的逻辑，这样整个项目中的 console.log 语句全都不需要注释或者加前置逻辑就可以在打包时移除 console.log 输出了。
除了console.log，我们平常代码中可能还会有console.info，console.error, console.warning 之类的逻辑，针对每个方法都写以上的方法虽然也不复杂，但是有一种更加灵活的处理方法，可以通过配置完成以上的功能，同时还支持更加复杂的逻辑判断（例如只处理所有 .vue 文件的 console.log），这就时我们所说的第二种方法：利用 webpack的 Terser plugin 来实现。
首先来安装 Terser plugin（注意由于vue cli v4.x中已经引入了terser plugin，故不需额外安装这个包，这里为了学习方便才用到）: yarn add terser-webpack-plugin --dev
这里我们需要先熟悉以下三个文档：
Terser-webpack-plugin 的webpack配置：
https://github.com/webpack-contrib/terser-webpack-plugin
terserOptions的配置：
https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
vue 项目中对 webpack 进行配置的文档：
https://cli.vuejs.org/zh/guide/webpack.html
综合下来我们得到了在 vue.config.js 中的配置文件：
这份配置无论在 vue cli 3.x 还是 vue cli 4.x 版本中都是可以正常使用的。但是以上是出于学习方便，现在 vue cli 4.x 中的官方推荐配置不再需要安装 terser-webpack-plugin，直接按照以下配置来即可。（参考文档：https://cli.vuejs.org/migrating-from-v3/#vue-cli-service）
最后，我们希望对配置完成的结果进行测试，在 development 环境下我们有 webpack-dev-server 可以用，但是当执行 yarn run build 之后部署到生产环境之前，我们如何进行测试呢？
最方便的方法就是使用ZEIT提供的 serve 包，安装很简单，直接 yarn global add serve 即可。安装之后直接运行 serve -s dist 即可运行一个类似 webpack-dev-server 的服务了。
以上即是两种在打包时去除 console 信息的方法，如果你有第三种方法，请留言给我。
推荐阅读：