如何过滤Vite开发环境下的控制台日志？

开发环境下，浏览器控制台被大量Vite日志刷屏，比如这类内容：

[vite] connecting...
[vite] connected.
[vite] hot updated: /src/app.css

之前尝试的方法都没解决问题：vite.config.ts里的logLevel: 'error'只清理服务器控制台，浏览器自带的负向过滤每次重启都得重新设置，修改console的方法要么对Vite日志无效，要么直接禁用所有日志还会弹出提示。

下面是几个有效的解决办法：

方法一：写个Vite插件拦截客户端日志 #

Vite的客户端日志是通过内置的客户端脚本输出的，我们可以写个简单插件修改这段代码，精准过滤Vite相关日志：

import { defineConfig, Plugin } from 'vite'

const suppressViteClientLogs = (): Plugin => {
  return {
    name: 'suppress-vite-client-logs',
    transform(code, id) {
      // 匹配Vite客户端核心脚本
      if (id.includes('vite/dist/client/client.mjs')) {
        // 注释掉所有带[vite]标记的console.log/info输出
        return code.replace(
          /console\.(log|info)\(\[.*?vite.*?\].*?\)/g,
          '/* 已过滤Vite客户端日志 */'
        )
      }
      return code
    }
  }
}

export default defineConfig({
  plugins: [suppressViteClientLogs()],
  // 你的其他Vite配置
})

这个方法只会过滤Vite的客户端日志，不会影响你自己代码里的console输出。

方法二：用浏览器插件保存过滤规则 #

装个类似Chrome的「Console Filter Rules」插件，预设过滤规则（比如过滤包含"[vite]"的日志），规则会被永久保存，不用每次开新标签或重启浏览器都重新设置。

方法三：配置Vite的HMR客户端日志级别（Vite 4+） #

部分Vite 4及以上版本支持通过配置关闭HMR相关的客户端日志，试试在vite.config.ts里加：

export default defineConfig({
  server: {
    hmr: {
      clientLogLevel: 'silent'
    }
  }
})

这个方法能覆盖连接、热更新这类常见的Vite日志，但可能无法过滤所有Vite相关输出，适合需求简单的场景。

内容的提问来源于stack exchange，提问作者Eli O.