vite-plugin-simple-mock

npm 地址

基于 TypeScript 开发的 Vite Server mock 服务。 支持 TypeScript 和 JavaScript 环境使用 Mock API。Mock Api 提供参数解析，包含 formData 数据解析，并支持 express.js middlewares.

安装

# 使用npm
npm i -D vite-plugin-simple-mock
# 使用yarn
yarn add -D vite-plugin-simple-mock

运行示例

npm install
cd ./example
npm install
npm run dev

用法

• 新建 mock 文件夹

// 目录 mock/index.ts
import { Mock } from "vite-plugin-simple-mock";

const mock = new Mock();

mock.get("/api/test", (req, res) => {
  return {
    code: 0,
    msg: "请求成功"
    data: {}
  }
})

return mock

• 在 vite.config.ts 中使用

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import ViteSimpleMock from "vite-plugin-simple-mock";
// 导出的mock对象
import mock from "./mock/index";

export default defineConfig({
  plugins: [vue(), ViteSimpleMock(mock)],
});

mock 对象说明

• constructor

class Mock {
  constructor(options?: Pick<MockOptions, "disabled" | "timeout">) {}
}

| 参数 | 类型 | 必填项 | 说明 | | -------- | ------- | ------ | ------------------ | | disabled | boolean | 否 | 是否禁用 mock 对象 | | timeout | number | 否 | 代理的超时时长 |

• request 代理请求方法
• get,post,put,delete,patch,options,head,trace 特定请求方式的代理

request(options: MockRequest & MockOptions) {}
get(url: string, callback: MockCallback, options?: MockOptions) {}

MockRequest 说明

| 参数 | 类型 | 必填项 | 说明 | | -------- | ------------ | ------ | ------------------ | | url | string | 是 | 代理的路径 | | method | string | 是 | 代理请求方式 | | callback | MockCallback | 是 | 代理请求的回调函数 |

MockCallback 说明

// req和res为http对象
// 函数内return值，即为返回值，
// 注：返回值必须为javascript有效值
export interface MockCallback {
  (req: Connect.IncomingMessage & RequsetParams, res: ServerResponse): any;
}

MockOptions 说明

| 参数 | 类型 | 必填项 | 说明 | | ---------- | ------- | ------ | ------------------ | | disabled | boolean | 否 | 是否禁用 mock 对象 | | timeout | number | 否 | 代理的超时时长 | | statusCode | number | 否 | 响应状态 | | headers | Object | 否 | http 响应头 |

插件说明

export default function VitePluginSimpleMock(
  mock: Mock,
  options?: PluginOptions
): PluginOption {}

| 参数 | 类型 | 必填项 | 说明 | | ------- | ------------- | ------ | ---------- | | mock | Mock | 是 | mock 对象 | | options | PluginOptions | 否 | 插件配置项 |

PluginOptions 说明

| 参数 | 类型 | 必填项 | 说明 | | ------------------ | ------------------------------------------- | ------ | ------------------------------------------------ | | proxy | string / RegExp / Array<string / RegExp> | 否 | 代理路径，默认: /^/api// | | ignore | string / RegExp / Array<string / RegExp> | 否 | 忽略代理路径 | | disabled | boolean | 否 | 禁用插件 | | middlewares | Connect.NextHandleFunction[] | 否 | express.js 中间件，主要用于参数处理 | | disabledMiddleware | boolean | 否 | 禁用插件集成的中间件，避免一些重复处理及不明错误 |

特殊用法

// 目录 mock/index.ts
import { Mock } from "vite-plugin-simple-mock";

const mock = new Mock();

// 低优先级
mock.get("/api/test", (req, res) => {
  // 设置响应状态值
  res.statusCode = 210
  // 设置请求头
  res.setHeader("custom-type", "0_0");
  return {
    code: 0,
    msg: "请求成功"
    data: {
      query: req.query, // url链接参数
      body: req.body, // body参数
    }
  }
})
// 高优先级
mock.get("/api/top", (req, res) => {
  return {
    code: 0,
    msg: "请求成功"
    data: {
      query: req.query, // url链接参数
      body: req.body, // body参数
    }
  }
}, {
  // 配置项优先级最高
  statusCode: 210,
  headers: {
    "custom-type": "-0_0-"
  }
})

return mock

注意事项

1. 插件只做基本的请求代理。
2. 插件注册多个相同代理，只会成功第一个

License

MIT