告别复制粘贴，这个高效的 Vite 插件让我摸鱼时间更充足了！

萌萌哒草头将军

发布于 2025-09-15 14:26:46

3900

代码可运行

文章被收录于专栏：前端框架前端框架

运行总次数：0

代码可运行

前言

最近我开发了 vite-plugin-swagger-mcp 插件，可以通过精确投喂 Swagger 数据给大模型，生成准确的请求函数、参数和返回值类型。它避免了上下文过长导致的幻觉问题，让开发更高效！

仓库地址：https://github.com/mmdctjj/vite-plugin-swagger-mcp

往期精彩推荐

正文

在日常前端开发中，Swagger 文档虽详尽，但实际使用时存在这些问题：

手动复制繁琐：需要从 Swagger 复制路径、参数、请求体和响应类型到代码中，添加 Axios/Fetch 函数和 TypeScript 类型。重复操作易出错，尤其在接口众多时。
大模型辅助的限制：想用 Vscode 或 Trae 生成代码时，因提示词长度限制，需多次复制接口细节，效率低下。
全文档投喂的幻觉：直接将 Swagger JSON 文件传给大模型，上下文过长（数千行），易产生幻觉：参数类型错乱、函数生成不准，甚至忽略边缘情况。

痛定思痛，我开发了 vite-plugin-swagger-mcp 这个插件，

插件通过生成 MCP 服务器，让大模型按需访问 Swagger 数据，实现精确投喂：

模块级/接口级拆分：自动解析 Swagger 文档，按模块或单个接口组织数据，避免全量加载。
MCP 集成：启动本地 MCP SSE 服务器（http://ip:port/_mcp/sse/swagger），大模型可通过自然语言交互查询精确数据。
编辑器支持：支持 VSCode、Cursor、Trae 等所有支持添加 MCP 功能的 IDE！

插件启动后，在编辑器里添加 MCP 服务，

{
  "mcpServers": {
    "swagger": {
      "url": "http://localhost:5173/_mcp/sse/swagger"
    }
  }
}

Trae 添加之后

之后就可以使用大模型直接查询：“生成 /xxx 接口的 GET 请求函数和类型”，插件会投喂精确数据，生成准确代码。

示例1

示例2

即使同时生成一个模块下所有接口，都可以做到精确、无幻觉。

如何使用

安装：

pnpm add vite-plugin-swagger-mcp -D

配置：

在 vite.config.ts 中添加插件，如下。

示例配置（vite.config.ts）：

import { defineConfig } from 'vite';
import swaggerMcp from 'vite-plugin-swagger-mcp';

export default defineConfig({
  plugins: [
    swaggerMcp({
      swaggerUrl: 'http://ip:port/path/v2/api-docs',
      token: 'xxxx', // 可选 Bearer Token
    }),
  ],
});

启动：

npm run dev

启动成功后可以在日志里看到具体的地址：

MCP server connected: http://localhost:5173/_mcp/sse/swagger

xxxx@0.0.0 dev
vite

MCP server connected: http://localhost:5173/_mcp/sse/swagger

  VITE v7.0.4  ready in 470 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

然后取对应的编辑器添加 MCP 工具即可！

详细用法见 https://github.com/mmdctjj/vite-plugin-swagger-mcp

另外，大家不用担心对生产环境有影响，因为只使用了 Vite 插件的 configureServer 函数，仅开发时生效！