vite-plugin-best-mock

English | 中文

[![npm][npm-img]][npm-url] [![node][node-img]][node-url]

Provide local and prod mocks for vite.

A mock plugin for vite, and support the local environment and production environment at the same time. Connect service middleware is used locally, runtime not yet implemented.

Install (yarn or npm)

node version: >=12.0.0

vite version: >=2.0.0

1yarn add vite-plugin-best-mock -D
2# or
3npm i vite-plugin-best-mock -D

Example

Run Example

1# ts example
2cd playground
3
4yarn install
5
6yarn dev

Usage

Development environment

The development environment is implemented using Connect middleware。

Different from the production environment, you can view the network request record in the Google Chrome console

• Config plugin in vite.config.ts

1import { UserConfigExport, ConfigEnv } from 'vite'
2
3import { mockPlugin } from 'vite-plugin-mock'
4
5export default ({ command }: ConfigEnv): UserConfigExport => {
6  return {
7    plugins: [
8      vue(),
9      mockPlugin(),
10    ],
11  }
12}

• Options

1interface MockPluginConfig {
2  dir?: string;
3  prefix?: string;
4  timeout?: [number, number];
5  multiparty: MultipartyConfig;
6}

Options

dir

type: string

default: 'mock'

Set the folder where the mock .ts file is stored

prefix

type: string

default: '/api/'

the url start with prefix will be mocked

localEnabled

type: boolean

default: command === 'serve'

Set whether to enable the local mock .ts file, do not open it in the production environment

prodEnabled

type: boolean

default: command !=='serve'

Set whether to enable mock function for packaging

multiparty

type: MultipartyConfig

default: {}

If you pass multiparty to mockPlugin(), they are passed directly into multiparty.

Mock file example

/path/mock

1// user.ts
2
3import { MockMethod } from 'vite-plugin-best-mock'
4
5/**
6 * url: /user
7 * method: get
8 */
9export const get: MockMethod = (req) => {
10	const { id } = req.query || {};
11	return {
12		id,
13		name: 'qingyang',
14	};
15};
16
17/**
18 * url: /user
19 * method: post
20 */
21export const post: MockMethod = (req) => {
22	const { id } = req.body || {};
23	return {
24		id,
25		name: 'qingyang',
26	};
27};

MockMethod

1export interface MockMethod {
2  (req: Req, res: Res): any;
3  timeout?: Pick<MockConfig, "timeout">["timeout"];
4}

you can refer to Next.js Dynamic api routes.

License

MIT