当前位置： 首页 > news >正文

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

news 2025/11/10 9:09:19

🚀 作者主页： 有来技术
🔥 开源项目： 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 成为你的最佳调试助手吧！ 🚀

http://www.dtcms.com/a/589497.html

相关文章：

  • 如何20元/年开通Termius专业版
  • 树莓派docker_freeCAD环境搭建
  • 数字营销网站建设佛山规划建设局网站
  • 【数据结构】位图和布隆过滤器
  • 对于数据结构:堆的超详细保姆级解析——下（堆排序以及TOP-K问题）
  • (* MARK_DEBUG=“true“ *)
  • 章丘哪里做网站做商城网站产品怎么分布
  • 使用docker部署Java项目
  • PyTorch深度学习进阶（三）（残差网络ResNet）
  • 02.第一个Python程序
  • 【Redis】Redis分布式缓存 - 分片集群
  • 论基层门户网站的建设vi设计手册完整版案例
  • Spring AI调用MCP服务
  • Goer系列-1-Docker基础命令学习
  • Tauri快速搭建环境
  • 光的压缩态：突破量子极限的 “超精准光源” 科普详解
  • 【C++】分治-归并排序算法习题
  • 网站开发服务合同印花税wordpress主题微博
  • 网站 功能呢杭州如何设计公司网站
  • Ansys SAM 与 Scade One：重塑安全关键系统开发的 MBSE 新范式
  • ADC的学习
  • 【智能体】扣子平台 ① 构建智能体工作流：从提示词到JSON配置的全流程实践
  • GitHub 热榜项目 - 日榜(2025-11-08)
  • 20_FastMCP 2.x 中文文档之FastMCP服务端认证：令牌验证详解
  • 缅甸最新消息seo数据分析哪些方面
  • 2.6 LoRA 微调实战（使用 PEFT 库）
  • 建设电子商务网站的目的公司企业网站建设方案书
  • 项目三：信息抽取与图谱问答（医疗科研文献知识图谱与智能问答平台）
  • Sequelize：获取器, 设置器 虚拟字段
  • DINOv3的学习