mocxykit

🚀 mocxy 本地开发环境代理工具

mocxy 是一款强大的本地开发环境代理工具，它支持 Ngrok 公网访问、环境变量管理、MCP 数据请求、Faker MOCK 数据生成以及静态资源缓存等实用功能，能有效提升开发效率。

🚀 快速开始

Ngrok 公网访问

要使用 Ngrok 实现公网访问，请按照以下步骤操作：

1. 访问配置页面：http://localhost:3000/config
2. 点击右上角的设置图标
3. 在 Ngrok 控制台 注册免费账号
4. 复制 Ngrok 账号的 authtoken
5. 将 authtoken 粘贴到设置窗口中
6. 点击“开启外网访问”

⚠️ 重要提示

• 免费版 Ngrok 存在使用限制
• 每次创建新隧道时，公网 URL 会重新生成

环境变量管理

要启用环境变量功能，请按照以下步骤操作：

1. 使用带有 DefinePlugin 的 webpack 配置
2. 在 webpack 中添加 WebpackProxyMockPlugin
3. 或者在 vite 插件中，将 viteProxyMockPlugin 添加到 vite.config.js

MCP 数据请求支持

在 AI 编程中使用 MCP 请求数据，请参考以下示例：

示例 1: 获取 todo 列表数据

// 在 @todoList.tsx 中实现 todo 列表功能

AI 将自动请求 api/todo-list 接口的数据结构，并根据返回结果生成代码。

示例 2: 处理错误信息

// 请求 api/todo-list 接口，处理错误反馈

AI 将获取错误数据并分析其结构，随后生成弹层显示错误信息。

Faker MOCK 数据支持

Faker MOCK 功能提供了灵活的数据生成能力：

1. 在 MOCK 数据编辑页面勾选“返回随机数据”
2. 填写需要随机化的字段路径
3. 支持的语法格式包括：
   • data：随机化整个 data 对象
   • data.list：仅随机化 list 字段
   • data.list<100>：生成 100 条随机数据
   • data,page.total：多个字段随机化

静态资源缓存

mocxy 提供高效的静态资源缓存功能：

• 自动缓存：快速加载静态资源
• 多级缓存机制：提升访问速度
• 可配置清理策略：手动或自动清空缓存

✨ 主要特性

• Ngrok 公网访问：方便将本地服务暴露到公网。
• 环境变量管理：支持创建多环境配置，绑定特定代理，快速切换环境。
• MCP 数据请求支持：在 AI 编程中可便捷请求数据。
• Faker MOCK 数据生成：提供灵活的数据随机化能力。
• 静态资源缓存：具备自动缓存、多级缓存机制和可配置清理策略。

📦 安装指南

文档未提及安装步骤，故跳过此章节。

💻 使用示例

基础用法

// 在 @todoList.tsx 中实现 todo 列表功能

高级用法

// 请求 api/todo-list 接口，处理错误反馈

📚 详细文档

环境变量管理

环境变量支持以下操作：

1. 创建多个环境配置
2. 将环境变量绑定到特定代理
3. 快速切换不同环境
4. 切换环境时可以选择清理缓存

获取帮助

如需进一步帮助，请联系 开发者邮箱 或访问 官方文档。

⚠️ 重要提示

本文档仅为示例内容，具体功能和操作请以实际工具为准。