摘要：本地开发项目时，如果功能有异常，我们首先想到的是查看控制台是否有报错信息。根据报错信息来解决问题，这一招确实很管用。但对于打包后的线上项目，这一招基本是不灵的。因为在打包时，插件会帮我们清除所有的console日志信息......

一、线上项目苦console久矣

通常情况下，Vue项目或Vite项目在本地开发时，控制台都是有日志输出的。但线上项目却没有任何日志输出，这个时候一旦功能异常，我们很难快速找到原因。

上一篇文章就是个很真实的例子，有兴趣的看官可以戳我访问→→→《bug复盘之Vite2项目在线上报错，修复后却意外发现Table组件的几个bug》。当时的情况是：本地功能正常，打包上线后某个功能异常，控制台无报错。当时解决的方法是：修改本地配置文件，在本地打包并调试，最终排查出问题。再更改代码，重新打包上线。

可以看到，这个流程实际上是有优化空间的。如果我们能让线上项目在异常时，控制台中可以显示必要信息，那不就可以节省很多时间吗？

二、修改配置文件，合理清空console日志信息

经过上一次教训，后来我又看了看文档，发现通过修改参数pure_funcs，确实可以更优雅的实现我们的需求。

修改vite.config.js配置文件，修改如下：

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
  return {
    build: {
      terserOptions: {
        // 更多配置见→→→ https://terser.org/docs/api-reference#minify-options
        compress: {
          // drop_console: false, // 打包时删除console，默认false。此处不需要配置，如果配置了，则会清空所有console
          // drop_debugger: true, // 打包时删除 debugger，默认true。
          pure_funcs: ['console.log', 'console.warn'] // 注意这里，我们只清除log和warn，如果项目有报错，error是可以直接在控制台显示的，方便我们查找问题
        },
      },
    },
    ...... // 省略一些未修改的配置项
  }
})

上面代码中的drop_console和drop_debugger，可以选择性忽略掉，主要看pure_funcs就行了。默认值是null，可以传一个数组，数组里面是要过滤的参数。这里传入了console.log和console.warn，那么在打包后，项目里的console.log和console.warn都会被过滤掉。此时如果项目有报错，console.error会直接显示在控制台中，这样我们就可以更直接的看到错误信息了。

为了验证此配置是否可行，我们故意写一段错误的代码，然后打包项目并访问打包后的项目。如下图↓↓↓

可以看到，控制台是有报错信息的哈！

看官是不是以为这样就万事大吉，高枕无忧了？

那我再来给看官讲一个真实的案例吧，发生在前不久，跟路由权限有关。

2.1、路由权限异常的案例

上周，我们项目上到测试环境后，有一个帐号点击某个菜单后突然跳到了404页面，控制台也没有报错。注意下，此时控制台没有报错日志！

实际上，是这个帐号没有该菜单路由权限造成的。由于权限接口返回的数据结构层次太深，乍眼看去也发现不了啥问题。最后还是通过启动本地项目进行调试，直到控制台中打印了红字“当前用户无此路由权限 xxx”，这时才真相大白。我跟后端@宝哥确定了下，确实是用代码同步时遗漏了此路由。

查看项目代码，发现当时写法如下：

console.log('%c 当前用户无此路由权限', 'color:#f00', name, ';', Date.now())

由于此处用的是console.log，所以在打包后自然被过滤掉了。

2.2、优化方案

这里有多种解决方法，推荐2种最简单的方法，仅供参考。

2.2.1、方案一：巧用解构

const { log } = console
log('%c 解构log方案 当前用户无此路由权限', 'color:#f00', name, ';', Date.now())

2.2.2、方案二：改用error

console.error('%c error方案 当前用户无此路由权限', 'color:#f00', name, ';', Date.now())

现在打开控制台，我们随便输入一个不存在的路由并回车，可以看到控制台有报错信息了。如下图↓↓↓

三、结束语

至此，本次分享的内容就到这里。用一句话来总结：合理的配置，可以让我们更快速的根据报错信息来定位问题，大大节约排查时间。

明晚就是平安夜了，苹果我就不送了，送上一句祝福：愿各位看官们百毒不侵，一定要挺进决赛圈啊！

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2022-12-23/vite2-build-show-console.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。