{"repo":"shunseven/mocxykit","free":true,"listed":false,"github":"https://github.com/shunseven/mocxykit","clone":"git clone https://github.com/shunseven/mocxykit.git","description":"This is an Frontend development service middleware that can be used with webpack and vite. Its main function is to visualize the configuration, manage http(s)-proxy, and mock data.","language":"JavaScript","stars":39,"topics":["api-mock-server","development","express","express-middleware","mock","proxy","proxy-server","vite","webpack","webpack-proxy"],"license":"MIT","category":"networking-infra","readme_excerpt":"mocxykit - 中文 - English 前端开发服务的中间件，主要用于代理请求和 MOCK 数据，可用于所有 webpack,vite和其它所有前端开发服务启动服务的开发项目, 此中间件应仅用于 开发 。 主要功能： - 代理请求和 MOCK数据 - 可视化的管理 MOCK 数据及代理功能 - 代理支持全局代理和某一个 URL 的自定义代理 - 可随时切换某一个URL进行代理转发或 MOCK 数据 - 可通过不同的入参，返回不同的MOCK 数据 - 可以快速把最近的请求返回的数据，存为 MOCK 数据 - 支持 faker 随机MOCK数据生成 - 支持多环境变量管理，随时切换环境变量 - 支持 Ngrok 公网访问 - 支持自动同步ApiFox文档及生成的mock数据 - 支持 MCP 协议，让 AI 编程时，自动获取 MOCK 数据或最近浏览器请求的数据及文档 - 内置API请求工具，可直接发送和测试API请求 入门 首先，安装模块： 示例 用法 Webpack = 5.0 修改 webpack.config.js Webpack 生成100条随机数据 - 支持多字段随机化： data.list,page.total - 自动保持字符串格式：数字字符串保持位数，字母数字混合保持格式 - 配置方式： 1. 在MOCK数据编辑页面勾选\"返回随机数据\" 2. 在输入框中填写需要随机化的字段路径 3. 支持的语法格式： - data - 随机化整个data对象 - data.list - 只随机化list字段 - data.list - 生成100条随机数据 - data,page.total - 多个字段随机化 环境变量 代理支持环境变量管理功能，您可以： - 创建多个环境配置 - 将环境变量绑定到特定代理 - 快速切换不同环境 - 切换环境时自动清理浏览器缓存 开启环境变量功能 要启用环境变量功能，您需要： 1. 使用带有 DefinePlugin 的 webpack 2. 在 webpack 配置中添加 WebpackProxyMockPlugin 3. 或者用的是 vite 插件，直接在 vite.config.js 中添加 viteProxyMockPlugin 如何使用环境变量 1. 点击环境选择器旁边的\"+\"按钮创建新环境 2. 在环境配制中添加键值对 3. 可以在代理设置中将环境绑定到代理 4. 切换环境时，系统会提示是否清理浏览器缓存 功能特点 - 绑定功能 ：代理可以绑定到特定环境 - 快速切换 ：轻松切换不同环境 - 缓存管理 ：切换环境时可选择清理浏览器缓存 - 可视化管理 ：环境变量的可视化管理界面 Ngrok 公网访问 本中间件支持使用 Ngrok 进行公网访问，让您的本地开发环境可以： - 与外部用户共享本地开发环境 - 在不同设备上测试应用 - 向客户演示开发进度 设置外网访问 1. 打开配置页面 http://localhost:3000/config 2. 点击右上角的设置图标 3. 在 https://dashboard.ngrok.com/signup 注册免费的 Ngrok 账号 4. 从 Ngrok 控制台复制您的 authtoken 5. 将 authtoken 粘贴到设置弹窗中 6. 点击\"开启外网访问\" 功能特点 - 自动创建隧道连接 - 安全的 HTTPS 端点 - 持久化存储 authtoken - 便捷的 URL 复制功能 - 一键重置隧道连接 注意事项 - Ngrok 免费版有一些使用","default_branch":null,"files":null,"tree":[],"storefront":"/r/shunseven","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/shunseven/mocxykit/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}