vite-plugin-proxy-logger

一个用于在开发环境中记录代理请求的 Vite 插件。

经过 proxy 代理后，在浏览器看不到接口域名，只能看到 http://localhost:3000/api/xxx 这种形式， 所以需要一个插件来记录接口的请求日志，方便开发人员调试。

控制台打印出当前真正请求的接口地址：

特性

• 🎯 仅在开发环境中生效，不会影响生产
• 📝 详细的请求日志
• ⏱️ 请求响应时间统计
• 🎨 彩色输出
• 🔍 可选的请求头信息显示
• 🎛️ 灵活的配置选项

安装

npm install vite-plugin-proxy-logger -D
# 或
yarn add vite-plugin-proxy-logger -D
# 或
pnpm add vite-plugin-proxy-logger -D

使用方法

在你的 vite.config.ts 中配置：

import { defineConfig } from 'vite'
import { proxyLogger } from 'vite-plugin-proxy-logger'

export default defineConfig({
  plugins: [
    proxyLogger()
    // proxyLogger({
    //   showHeaders: true, // 显示请求头信息
    //   logType: 'all', // 输出请求前和请求后的日志
    // })
  ],
  server: {
    proxy: {
      '/api': {
        target: 'http://xxxxx.com',
        changeOrigin: true,
      },
      // ...
    }
  }
})

配置选项

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | logType |'req' | 'res' | 'all'| 'res' | 'req'：仅记录请求前的日志；'res'：仅记录请求后的日志；'all'：记录请求前和请求后的日志| | showHeaders | boolean | false | 是否显示请求头信息 | | showTiming | boolean | true | 是否显示响应时间 | | showProxyPath | boolean | true | 是否显示代理路径前缀 | | formatter | (info: ProxyLogInfo) => string | undefined | 自定义日志格式化函数 | | filter | (req: IncomingMessage) => boolean | () => true | 过滤特定请求的日志 |

自定义日志格式

你可以通过 formatter 选项自定义日志输出格式：

proxyLogger({
  formatter: (info) => {
    return `${info.method} ${info.url} -> ${info.target} (${info.duration}ms)`
  }
})

过滤请求

使用 filter 选项来过滤特定的请求：

proxyLogger({
  filter: (req) => {
    // 只记录 GET 请求
    return req.method === 'GET'
  }
})

许可证

MIT