mocxykit

mocxykit

这是一个可以与webpack和vite一起使用的前端开发服务中间件。其主要功能是可视化配置、管理http(s)-代理以及模拟数据。

GitHub
Created Byshunsevenshunseven

MockyKit 快速开始指南

MockyKit 是一个强大的前端开发服务中间件，用于代理请求和模拟数据，适用于所有 webpack、vite 和其它前端开发项目。

主要功能

  • 可视化管理代理和 MOCK 数据
  • 灵活切换代理/MOCK 模式
  • 内置 API 请求工具
  • 支持 faker 随机数据生成
  • 支持多环境变量管理
  • 支持 ApiFox 文档同步

安装

npm install mocxykit --save-dev

基本用法

Webpack 5+

// webpack.config.js
const { WebpackProxyMockPlugin } = require('mocxykit')

module.exports = {
  //...
  plugins: [
    new WebpackProxyMockPlugin({
      apiRule: '/api/*',
      lang: 'zh'
    })
  ]
};

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'
    })
  ]
})

Express

const { proxyMockMiddleware } = require("mocxykit");
const express = require("express");
const app = express();

app.use(proxyMockMiddleware({ apiRule: '/api/*' }));

app.listen(3000, () => console.log("Running on port 3000"));

配置选项

参数类型默认值说明
apiRulestring/api/*代理规则，多个用逗号分隔
httpsbooleantrue是否代理HTTPS请求
configPathstring/config配置页面路径
langstringzh界面语言
buttonPositionstringbottom按钮位置(仅Vite)

访问配置界面

  • 直接访问: http://localhost:[port]/config
  • Vite项目: 点击页面右下角的按钮

通过配置界面，您可以:

  • 管理代理服务器
  • 创建和编辑MOCK数据
  • 切换特定URL的代理/MOCK模式
  • 发送API请求并测试
  • 同步ApiFox文档和MOCK数据

更多详细信息，请参考完整文档。