CodeGeeX 深度集成 Vite：安装插件后配置 apiKey、autoInjectTypes 和 enableDevHints；启用 typeRoots 扫描类型定义；开发时自动注入调试建议；通过注释指令和 JSDoc 自动生成并注册 Mock 数据。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要在 Vite 项目中让 CodeGeeX 不仅能生成 Vue 组件或 Mock 数据，还要能直接参与构建流程、注入调试能力、自动同步类型定义——这要求 CodeGeeX 不是孤立调用的 AI 工具，而是深度嵌入 Vite 生命周期的智能协作者。
安装并注册 CodeGeeX Vite 插件
打开终端，进入 Vite 项目根目录，执行：npm install -D @codegeex/vite-plugin。
在 vite.config.ts 中导入并启用插件：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import codegeex from '@codegeex/vite-plugin'
export default defineConfig({
plugins: [
vue(),
codegeex({
apiKey: '【必须填入有效 API Key，否则插件启动失败】',
autoInjectTypes: true,
enableDevHints: true
})
]
})
立即学习“前端免费学习笔记（深入）”；
启用 TypeScript 类型自动反哺机制
该功能让 CodeGeeX 在生成组件或 API 调用代码时，自动读取 src/types/ 下的接口定义，并将字段约束、可选性、联合类型等精确映射到生成结果中。
第一步：确保项目已启用 TypeScript 并存在至少一个 .d.ts 或 .ts 类型文件，例如 src/types/user.ts。
第二步：在插件配置中设置 typeRoots: ['src/types']，否则 CodeGeeX 将无法定位类型声明。
第三步：重启开发服务器（npm run dev），插件会在首次启动时扫描并缓存全部类型结构——【此过程不可跳过，否则后续生成无类型保障】。
在开发阶段实时获取 AI 辅助调试建议
当 Vite 开发服务器运行时，CodeGeeX 插件会监听控制台报错和 HMR 失败事件，并在浏览器开发者工具 Console 面板底部注入一行浅灰色提示条。
方法一：点击提示条右侧「?」图标，弹出上下文感知建议，例如：“检测到 ref() 未解构使用，建议改用 toRefs() 避免响应性丢失”。
方法二：在 console.error 抛出的错误堆栈末尾，自动附加一行 // ? CodeGeeX: 可能原因：props 未定义校验，建议添加 <code>required: true 或默认值。
注意：该功能仅在 import.meta.env.DEV === true 且插件配置中 enableDevHints: true 时生效。
配置 Mock 数据自动注入规则
不再手动维护 mock/ 目录，让 CodeGeeX 根据路由和接口注释自动生成并挂载 Mock 响应。
① 在 src/main.ts 入口文件顶部添加注释指令：// @codegeex: mock routes /api/users → GET, POST /api/orders → GET
② 在对应 API 文件如 src/api/user.ts 中，为每个函数添加 JSDoc 注释：/** * @mock GET /api/users 返回 3 个用户，id 自增，name 为中文名 */
③ 插件启动后自动解析上述注释，生成 mock/user.mock.ts 并通过 msw 或 mock-service-worker 注册拦截器——【无需手动 import 或调用 setupWorker】。
④ 刷新页面，访问 /api/users 即可获得符合注释描述的模拟响应。
