Mocxykit

mocxykit 是什么？

🛠️ mocxykit 是一个为前端项目设计的服务中间件，主要配合 Webpack 和 Vite 使用。它不改变你的构建流程，而是叠加在开发服务器之上，帮你处理接口模拟、请求代理和本地服务共享这些常见但繁琐的问题。它的目标很直接：减少配置时间，提升开发调试效率。

为什么需要它？

以往在开发阶段要模拟接口数据，通常得手动创建 JSON 文件，再通过 webpack-dev-server 或 vite 的 proxy 配置转发请求。一旦接口路径变多或需要根据不同参数返回不同结果，维护成本就上来了——改个字段得翻文件，换环境得调配置，联调时还得反复确认后端服务是否可用。

更麻烦的是，当你想让同事看看你本地的页面，往往要打包上传或者折腾内网穿透工具。整个过程打断开发节奏，纯粹为了“让人看到”。

mocxykit 解决的就是这类重复性高、价值低的操作。你不再需要写死 mock 数据结构，也不用手动管理代理规则或临时部署预览链接。

核心能力速览

可视化 mock 管理：接口数据可以直接在界面中增删改查，支持根据 query、params 或 body 返回不同响应。比如同一个 /api/user 请求，可以设置 id=1 返回正常数据，id=-1 返回错误状态，调试边界情况时特别实用。

动态代理切换：支持配置多个代理规则，并能在真实接口和本地 mock 之间一键切换。开发时先用 mock 数据推进前端逻辑，联调时快速指向后端地址，无需修改代码或重启服务。

内置公网访问支持：集成了类似 ngrok 的功能，启动后可生成临时外网链接，把本地 localhost 页面分享给他人。适合远程评审、跨团队测试等场景，避免因网络限制导致协作延迟。

多环境变量联动：能读取项目中的 .env 文件并自动应用对应配置，不同环境下代理目标、mock 开关等设置可独立管理，减少人为出错。

适合谁？怎么用？

⚡ 如果你正在用 Vite 或 Webpack 做前端开发，经常需要对接口做模拟或调试跨域请求，mocxykit 可以直接接入现有项目，作为 dev server 的增强层使用。

它对独立开发者和小型团队尤其友好——不用搭建专门的 mock 服务，也不依赖后端稳定输出。你在写页面的同时就能定义接口行为，加快原型迭代速度。

建议从 mock 功能开始尝试：先把几个常用 API 的返回数据导入界面，设置好路径匹配规则，然后在浏览器里刷新查看效果。熟悉之后再启用代理和外网分享，逐步替代原来的手动流程。

整个工具没有复杂概念，基本操作几分钟就能上手。重点是它不强制你改变开发习惯，而是让原本需要命令行和文本编辑器完成的事，变得可观察、可交互、可复用。