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

有来技术2025-11-10 17:14

🚀 作者主页： 有来技术

🔥 开源项目： 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 是什么关系？

简单理解：

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

这个插件能做什么？

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

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

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

📦 快速开始

1. 安装插件

在项目根目录运行：

bash 复制代码 
pnpm add -D vite-plugin-vue-mcp

2. 配置 Vite

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

typescript 复制代码 
// vite.config.ts
import { VueMcp } from "vite-plugin-vue-mcp";

export default defineConfig({
  plugins: [
    vue(),
    VueMcp(), 
  ],
});

3. 配置 Cursor

3.1 创建配置文件

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

json 复制代码 
{
  "mcpServers": {}
}

3.2 启动项目

bash 复制代码 
pnpm run dev

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

json 复制代码 
{
  "mcpServers": {
    "vue-mcp": {
      "url": "http://localhost:3000/__mcp/sse"  // 自动生成
    }
  }
}

3.3 开启 Cursor 的 MCP 功能

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

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. 安装依赖
bash 复制代码 
pnpm add -D vite-plugin-vue-mcp
2. 配置 Vite

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

typescript 复制代码 
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：

json 复制代码 
{
  "mcpServers": {}
}
4. 启动项目
bash 复制代码 
# 启动开发服务器
pnpm dev

# 服务启动后，会在控制台看到：
# ✓ MCP Server started at http://localhost:3000/__mcp/sse

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

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 直接返回真实数据：

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

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

案例二：高亮定位组件

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

在 Cursor 中输入：

复制代码 
@vue-mcp 高亮 DeptTree 组件

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

应用场景：

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

🎉 总结

一句话总结

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

核心价值

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

适合谁用？

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

10 秒快速开始

bash 复制代码 
# 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/docs Cursor AI 使用指南
💡 示例项目 vue3-element-admin 本文演示项目

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

相关推荐
该用户已不存在2 小时前
免费的 Vibe Coding 助手？你想要的Gemini CLI 都有
人工智能·后端·ai编程
fruge2 小时前
前端本地存储进阶：IndexedDB 封装与离线应用开发
前端
忍者扔飞镖2 小时前
欧服加载太慢了，咋整
前端·性能优化
鹏北海2 小时前
Vue 3 超强二维码识别：多区域/多尺度扫描 + 高级图像处理
前端·javascript·vue.js
Android疑难杂症2 小时前
一文讲清鸿蒙网络开发
前端·javascript·harmonyos
爱学习的程序媛2 小时前
【JavaScript基础】Null类型详解
前端·javascript
前端一课2 小时前
uniapp之WebView容器原理详解
前端
CryptoRzz2 小时前
DeepSeek印度股票数据源 Java 对接文档
前端·后端
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件04BongoCat - 跨平台键盘猫动画工具05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Linux下V2Ray安装配置指南07Labelme从安装到标注：零基础完整指南08《大数据技术原理与应用》实验报告三 熟悉HBase常用操作09jdk21下载、安装（Windows、Linux、macOS）10PyCharm 社区版全平台安装指南