MocxykitCAUTION

• 中文
• English

前端开发服务的中间件,主要用于代理请求和 MOCK 数据,可用于所有 webpack,vite和其它所有前端开发服务启动服务的开发项目, 此中间件应仅用于开发。

主要功能:

• 代理请求和 MOCK数据
• 可视化的管理 MOCK 数据及代理功能
• 代理支持全局代理和某一个 URL 的自定义代理
• 可随时切换某一个URL进行代理转发或 MOCK 数据
• 可通过不同的入参,返回不同的MOCK 数据
• 可以快速把最近的请求返回的数据,存为 MOCK 数据
• 支持 faker 随机MOCK数据生成
• 支持多环境变量管理,随时切换环境变量
• 支持 Ngrok 公网访问
• 支持自动同步ApiFox文档及生成的mock数据
• 支持 MCP 协议,让 AI 编程时,自动获取 MOCK 数据或最近浏览器请求的数据及文档
• 内置API请求工具,可直接发送和测试API请求

入门

首先,安装模块:

npm install mocxykit --save-dev

示例

用法

Webpack >= 5.0

修改 webpack.config.js

const { WebpackProxyMockPlugin } = require('mocxykit')
module.exports = {
//...
devServer: {
...
},
plugins: [
// 在 wepback 中会在插件里获取 devServer 并注入代理,devServer 不需要再配制
new WebpackProxyMockPlugin({
apiRule: '/api/*',
lang: 'zh'
})
]
};

Webpack <= 4+

// vue.config.js 或者其它 webpack config 文件 
const { proxyMockMiddleware } = require('mocxykit')

module.exports = {
//...
devServer: {
before(app) {
app.use(proxyMockMiddleware({
apiRule: '/api/*',
lang: 'en'
}))
}
}
};

vite

// vite.config.js
import { defineConfig } from 'vite'
import { viteProxyMockPlugin } from 'mocxykit'

export default defineConfig({
plugins: [
viteProxyMockPlugin({
apiRule: '/api/*',
lang: 'zh',
buttonPosition: 'bottom', // 可选:'top'(顶部)、'middle'(中间)、'bottom'(底部) 或坐标格式如 '100,100'
})
]
})

vue.config.js

const proxyMockPlugin = new WebpackProxyMockPlugin({
apiRule: '/api/*',
lang: 'zh'
})
module.exports = {
//...
devServer: {
setupMiddlewares: (middlewares, devServer) => {
// 在vue中,因 vue-cli在webpack 编译完成后,才注入 devServer,插件中获取不到 devServer配制,需要手动注入代理中间件
proxyMockPlugin.setupDevServer(devServer.app);
return middlewares;
}
},
plugins: [
proxyMockPlugin
]
};

express