vite-plugin-vue-mcp：在 Vue 3 + Vite 中启用 MCP，让 AI 理解并调试你的应用 - 指南

作者主页： 有来技术
开源项目： youlai-mall vue3-element-admin youlai-boot vue-uniapp-template
仓库主页： GitCode Gitee Github
欢迎点赞 收藏 ⭐留言 如有错误敬请纠正！

前言

在 Vue 开发过程中，你是否遇到过这样的困扰：

  • 调试困难：需要手动打开 DevTools，一层层查找组件状态
  • 理解成本高：接手新项目时，需要花费大量时间理解组件结构和数据流
  • ⏱️ 效率低下：每次调试都要重复打开浏览器控制台、Vue DevTools
  • AI 辅助有限：即使使用 Cursor AI，它也无法"看到"你的应用实时状态

vite-plugin-vue-mcp 的出现，完美解决了这些问题！它通过 Model Context Protocol (MCP) 协议，让 AI 工具能够实时读取和操作你的 Vue 应用状态，真正实现了"AI 理解你的应用"。

什么是 MCP

在了解具体插件之前，我们先搞清楚什么是 MCP。

一句话解释

MCP (模型上下文协议) 是一个让 AI 能够"看到"并"操作"你的应用实时状态的通信标准。

想象一下，传统的 AI 就像一个只能看代码的程序员，而有了 MCP，AI 就像能够亲自运行并调试你的程序，实时看到所有数据变化。

MCP 能做什么？

MCP 定义了 AI 和应用之间的"对话规则"：

  • 建立连接：AI 工具连接到正在运行的应用
  • 发送请求：AI 向应用询问"用户数据是什么？"
  • 获取响应：应用返回实时的用户数据给 AI
  • 双向交互：AI 还能修改数据，测试不同场景

通俗理解

假设你正在和 Cursor AI 对话，询问一个 Bug：

❌ 没有 MCP 的对话：

你：为什么用户列表一直显示"加载中"？
AI：让我看看代码...
    （AI 只能查看静态代码文件）
    可能是这几个原因：
    1. API 请求失败了
    2. loading 状态没有关闭
    3. 数据格式不对
    （AI 只能靠经验猜测）

✅ 有 MCP 的对话：

你：为什么用户列表一直显示"加载中"？
AI：让我看看应用当前的真实状态...
    （AI 通过 MCP 读取运行中的应用数据）
    我发现了问题：
    - loading 状态：true（一直是 true）
    - pageData：undefined（数据为空）
    - API 请求状态：pending（请求还在进行中）
    结论：API 请求超时了，建议检查网络或后端服务。
    （AI 基于真实数据，精准定位问题）

简单来说，MCP 就是给 AI 装了一双"眼睛"，让它能：

  • 实时观察：看到应用运行时的所有数据
  • 深入查看：读取组件状态、Store 数据、路由信息
  • ✏️ 动手调试：直接修改数据，测试各种场景
  • 精准分析：基于真实数据给出准确建议

MCP 的工作原理图解

┌─────────────────────────────────────────────────────┐
│                  Cursor AI                          │
│                  (AI 工具)                          │
│                                                     │
│  你问: "userStore 的状态是什么？"                    │
└────────────────────┬────────────────────────────────┘
                     │ MCP 协议连接
                     │ (SSE/WebSocket)
                     ▼
┌─────────────────────────────────────────────────────┐
│           你的 Vue 应用 (开发环境)                    │
│                                                     │
│  ┌────────────────────────────────────────┐        │
│  │  vite-plugin-vue-mcp                   │        │
│  │  (MCP Server)                          │        │
│  │                                         │        │
│  │  1. 接收 AI 的请求                      │        │
│  │  2. 读取应用状态 (组件、Store、路由)    │        │
│  │  3. 返回数据给 AI                       │        │
│  └────────────────────────────────────────┘        │
│                  │                                  │
│                  │ 读取                             │
│                  ▼                                  │
│  ┌────────────────────────────────────────┐        │
│  │  Vue 应用运行时状态                     │        │
│  │  - Pinia Store                         │        │
│  │  - Vue 组件状态                        │        │
│  │  - 路由信息                            │        │
│  └────────────────────────────────────────┘        │
└─────────────────────────────────────────────────────┘
                     │
                     │ 返回数据
                     ▼
┌─────────────────────────────────────────────────────┐
│                  Cursor AI                          │
│                                                     │
│  AI 回答:                                           │
│  "userStore 当前状态：                              │
│   - 用户: admin                                     │
│   - 角色: ADMIN                                     │
│   - 权限: 45 个"                                    │
└─────────────────────────────────────────────────────┘

为什么 MCP 这么强大？

优势说明传统方式 vs MCP
实时性看到的是运行中的真实数据静态代码 → 动态数据
✅ 准确性基于实际情况分析，不靠猜经验猜测 → 数据说话
交互性可以直接修改状态测试只能看 → 能看能改
智能性理解完整上下文，建议更准片面信息 → 全局视角

MCP 能帮你做什么？

  • 快速调试：AI 直接看到 Bug 现场，秒级定位问题
  • 状态分析：实时查看 Pinia Store、组件数据的真实值
  • 理解项目：接手新项目时，让 AI 帮你快速了解数据流
  • ⚡ 场景测试：让 AI 修改不同的状态值，测试各种情况

打个比方

把 AI 比作帮你检查房子的工程师：

场景没有 MCP有了 MCP
工程师能做的只能看建筑图纸能进入房子实地查看
了解程度不知道里面住着谁，家具怎么摆看到真实居住情况，甚至能挪动家具测试
问题诊断根据经验猜测可能的问题基于现场情况，精准定位问题

有了 MCP，AI 从"纸上谈兵"变成了"实地勘察"！

真实场景对比

场景：用户反馈"登录后看不到菜单"

❌ 没有 MCP 时的对话
你：为什么登录后看不到菜单？
AI：让我看看代码...（只能查看代码文件）
    可能是这些原因：
    1. 路由守卫逻辑有问题
    2. 菜单权限配置不对
    3. 用户角色设置错误
    建议你打开 DevTools 检查一下...
（AI 只能根据经验猜测，需要你自己去验证）
✅ 有 MCP 时的对话
你：为什么登录后看不到菜单？
AI：让我看看应用的实时状态...（通过 MCP 读取运行数据）
    【用户 Store 状态】
    ✓ 用户名：admin
    ✓ 角色：ADMIN
    ✓ 权限：45 个（权限正常）
    【权限 Store 状态】
    ✗ routes: []  ← 路由数组是空的！
    ✗ menuTree: []  ← 菜单树也是空的！
    【问题定位】
    找到了！用户登录成功，但是 permissionStore.generateRoutes()
    方法没有被调用，导致动态路由没有生成。
    【解决方案】
    检查 router/index.ts 的路由守卫，确保在登录后
    调用了 await permissionStore.generateRoutes()
（AI 基于真实数据，直接定位到问题根源）

看到区别了吗？有 MCP 的 AI 就像一个能看到你屏幕的专家！

vite-plugin-vue-mcp 插件介绍

它和 MCP 是什么关系？

简单理解：

对比项MCPvite-plugin-vue-mcp
是什么通信协议（标准）Vite 插件（实现）
类比HTTP 协议Apache/Nginx 服务器
作用定义如何通信让 Vue 应用支持 MCP

这个插件能做什么？

安装后，它会在你的 Vue 应用里启动一个 MCP 服务器，让 AI 工具（比如 Cursor）可以：

功能说明实际用途
读取状态查看组件、Store、路由的实时数据调试时看真实数据，不用打 console
✏️ 修改状态直接改变量值测试不同场景，不用手动操作界面
高亮组件在浏览器中标记出组件位置快速找到某个组件在哪
分析结构了解应用的组件树和数据流接手新项目时快速理解架构

官方仓库：https://github.com/webfansplz/vite-plugin-vue-mcp

快速开始

1. 安装插件

在项目根目录运行：

pnpm add -D vite-plugin-vue-mcp

2. 配置 Vite

打开 vite.config.ts，添加插件：

// vite.config.ts
import { VueMcp } from "vite-plugin-vue-mcp";
export default defineConfig({
plugins: [
vue(),
VueMcp(),
],
});

3. 配置 Cursor

3.1 创建配置文件

在项目根目录创建 .cursor/mcp.json 文件（先创建空文件即可）：

{
"mcpServers": {}
}

3.2 启动项目

pnpm run dev

启动后，插件会自动在 mcp.json 中生成配置：

{
"mcpServers": {
"vue-mcp": {
"url": "http://localhost:3000/__mcp/sse"  // 自动生成
}
}
}

配置文件自动生成

3.3 开启 Cursor 的 MCP 功能

  1. 点击 Cursor 右上角的⚙️齿轮图标
  2. 找到 MCP 选项
  3. 打开开关 ✅

开启 MCP 服务

4. 验证配置

现在你的 Vue 应用已经支持 MCP 了，AI 可以实时查看你的应用状态啦！

vue3-element-admin 项目集成实战

项目背景

vue3-element-admin 是一个基于 Vue 3 + Vite 7 + TypeScript + Element Plus 的后台管理系统模板，由有来开源组织维护。这是一个生产级的项目，包含完整的权限管理、菜单路由、用户管理等功能。

项目信息说明
技术栈Vue 3 + Vite 7 + TypeScript 5 + Element Plus
定位企业级后台管理系统基础框架
仓库地址 https://gitee.com/youlaiorg/vue3-element-admin

整合步骤

1. 安装依赖
pnpm add -D vite-plugin-vue-mcp
2. 配置 Vite

查看 vite.config.ts 的关键配置：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { VueMcp } from "vite-plugin-vue-mcp";
export default defineConfig({
plugins: [
vue(),
// 仅开发环境启用 MCP，用于与 AI 工具集成
VueMcp(),
],
});

配置亮点：

  • ✅ 只在开发环境启用，!isProduction 判断，生产环境不会加载 MCP
  • ✅ 条件性加载，使用扩展运算符 ... 优雅地处理条件插件
  • ✅ 注释清晰，说明了插件用途和使用场景
3. 创建配置文件

在项目根目录创建 .cursor/mcp.json：

{
"mcpServers": {}
}
4. 启动项目
# 启动开发服务器
pnpm dev
# 服务启动后，会在控制台看到：
# ✓ MCP Server started at http://localhost:3000/__mcp/sse

启动后，.cursor/mcp.json 会自动更新：

{
"mcpServers": {
"vue-mcp": {
"url": "http://localhost:3000/__mcp/sse"
}
}
}
5. 开启 Cursor MCP
  1. 点击 Cursor 右上角 ⚙️ 设置
  2. 找到 MCP 选项
  3. 开启开关 ✅
  4. 重启 Cursor（如果需要）

✨ MCP 工具箱

插件提供了 7 个工具，让 AI 能全方位了解你的应用：

工具功能使用场景举例
get-component-tree查看组件树结构“应用有哪些组件？层级关系是怎样的？”
get-component-state查看组件数据“UserList 组件的 loading 状态是什么？”
edit-component-state修改组件数据“把 loading 改成 false 试试”
highlight-component高亮标记组件“UserList 组件在页面哪个位置？”
get-router-info查看路由信息“当前路由是什么？有哪些路由？”
get-pinia-tree查看所有 Store“应用有哪些 Store？”
get-pinia-state查看/修改 Store“userStore 的数据是什么？”

使用方式

在 Cursor 对话框中，使用 @vue-mcp 前缀即可调用这些工具：

@vue-mcp 获取用户 Store 的数据
@vue-mcp 高亮 UserList 组件
@vue-mcp 当前路由是什么？

下面通过实际案例演示最常用的几个功能：

实战案例演示

案例一：查看用户 Store 数据

假设你想知道当前登录用户的信息。

❌ 传统方式

你问：

获取当前登录用户的 store 数据？

AI 回答：

可以通过以下方式获取：
1. 在组件中引入 useUserStore
2. 使用 console.log 打印数据
3. 或者打开 Vue DevTools 查看
示例代码：
import { useUserStore } from '@/store'
const userStore = useUserStore()
console.log(userStore.userInfo)

问题：AI 只能告诉你方法，你还得自己去操作才能看到数据。

传统方式

✅ 使用 MCP

前提：先启动项目并登录

  1. 运行 pnpm run dev
  2. 浏览器访问 http://localhost:3000
  3. 登录系统（admin/123456）

然后在 Cursor 中输入：

@vue-mcp userStore 的状态是什么？

AI 直接返回真实数据：

{
"userId": "2",
"username": "admin",
"nickname": "系统管理员",
"avatar": "https://...",
"roles": ["ADMIN"],
"perms": [...]
}

效果对比：AI 直接看到了运行中的真实数据！不用你写代码、不用打日志。

使用 MCP

案例二：高亮定位组件

想知道某个组件在页面的哪个位置？

在 Cursor 中输入：

@vue-mcp 高亮 DeptTree 组件

浏览器中的 DeptTree 组件会被高亮标记出来：

高亮组件效果

应用场景：

  • ✅ 快速找到组件位置
  • ✅ 确认是否渲染了某个组件
  • ✅ 理解组件层级关系

总结

一句话总结

vite-plugin-vue-mcp = 给 AI 装上"眼睛"，让调试变成聊天

核心价值

维度传统方式使用 MCP提升效果
⏱️ 效率手动打日志、开 DevTools直接问 AI10倍速度
准确性AI 靠猜测给建议AI 看数据给答案90%+ 准确
学习成本需要熟悉各种工具用自然语言提问0 学习成本
调试深度只能看代码静态结构看到运行时的真实数据全面透视

适合谁用？

  • ✅ 新手开发者：不用记各种调试命令，直接问 AI
  • ✅ 团队协作：快速理解别人写的代码
  • ✅ 接手旧项目：让 AI 帮你梳理应用结构
  • ✅ 调试高手：进一步提升效率

10 秒快速开始

# 1. 安装
pnpm add -D vite-plugin-vue-mcp
# 2. 在 vite.config.ts 中添加 VueMcp()
# 3. 启动项目
pnpm dev
# 4. 在 Cursor 中输入
@vue-mcp [你的问题]

延伸阅读

想了解更多？这些资源能帮到你：

资源链接说明
插件仓库webfansplz/vite-plugin-vue-mcp源码、文档、问题反馈
MCP 协议modelcontextprotocol.io了解协议标准
Cursor 文档cursor.sh/docsCursor AI 使用指南
示例项目vue3-element-admin本文演示项目

现在就开始使用 MCP，让 AI 成为你的最佳调试助手吧！

posted on 2026-01-26 08:42  ljbguanli  阅读(18)  评论(0)    收藏  举报

博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3