vite-plugin-mockit

local mock data functionality for vite, support vite 1.x and vite 2.x

• Simple writing(express.js style)
• watch file change
• auto reload mock server
• support cjs style Module

Install

1yarn add vite-plugin-mockit

example app

https://github.com/xuxihai123/vite-mock-example

Usage

1. writing a entry file. for examples ./mock/index.js

• mock file example one

1module.exports = {
2  'GET /api/user': { username: 'admin', sex: 5 },
3  'GET /api/list': function (req, res) {
4    let query = req.query || {};
5    return res.json({
6      limit: query.limit,
7      offset: query.offset,
8      list: [
9        { username: 'admin1', sex: 1 },
10        { username: 'admin2', sex: 0 },
11      ],
12    });
13  },
14  'GET /repos/hello': (req, res) => {
15    return res.json({
16      text: 'this is from mock server',
17    });
18  },
19  'GET /api/userinfo/:id': (req, res) => {
20    return res.json({
21      id: req.params.id,
22      username: 'kenny',
23    });
24  },
25  'GET /api/user/list/:id/:type': (req, res) => {
26    return res.json({
27      id: req.params.id,
28      type: req.params.type,
29    });
30  },
31
32  'POST /api/login/account': (req, res) => {
33    const { password, username } = req.body;
34    if (password === '888888' && username === 'admin') {
35      return res.json({
36        status: 'ok',
37        code: 0,
38        token: 'sdfsdfsdfdsf',
39        data: {
40          id: 1,
41          username: 'kenny',
42          sex: 6,
43        },
44      });
45    } else {
46      return res.json({ status: 'error', code: 403 });
47    }
48  },
49  'DELETE /api/user/:id': (req, res) => {
50    res.send({ status: 'ok', message: '删除成功！' });
51  },
52};

• mock file example two

1module.exports = [
2  {
3    path: '/api/user',
4    handler: (req, res) => {
5      return res.json({ username: 'admin', sex: 5 });
6    },
7  },
8  {
9    path: '/api/list',
10    handler: function (req, res) {
11      let query = req.query || {};
12      return res.json({
13        limit: query.limit,
14        offset: query.offset,
15        list: [
16          { username: 'admin1', sex: 1 },
17          { username: 'admin2', sex: 0 },
18        ],
19      });
20    },
21  },
22  {
23    path: '/repos/hello',
24    handler: (req, res) => {
25      return res.json({ text: 'this is from mock server' });
26    },
27  },
28  {
29    path: '/api/userinfo/:id',
30    handler: (req, res) => {
31      return res.json({
32        id: req.params.id,
33        username: 'kenny',
34      });
35    },
36  },
37  {
38    path: '/api/user/list/:id/:type',
39    handler: (req, res) => {
40      return res.json({
41        id: req.params.id,
42        type: req.params.type,
43      });
44    },
45  },
46  {
47    path: '/api/login/account',
48    method: 'post',
49    handler: (req, res) => {
50      const { password, username } = req.body;
51      if (password === '888888' && username === 'admin') {
52        return res.json({
53          status: 'ok',
54          code: 0,
55          token: 'sdfsdfsdfdsf',
56          data: {
57            id: 1,
58            username: 'kenny',
59            sex: 6,
60          },
61        });
62      } else {
63        return res.json({ status: 'error', code: 403 });
64      }
65    },
66  },
67  {
68    method: 'delete',
69    path: '/api/user/:id',
70    handler: (req, res) => {
71      res.send({ status: 'ok', message: '删除成功！' });
72    },
73  },
74];

2. Add configuration options in vite.config.js for vite

1const mockPlugin = require("vite-plugin-mockit");
2
3module.exports = {
4  plugins: [
5    mockPlugin({
6      entry: "./mock/index.js",
7      watchFiles: [], // watch file or dir change refresh mock
8      watchOptions: {}, //extension option from chokidar option
9      ignore: /_test/ // ignore change, support function or regex
10      //   debug: true, // debug log
11      disable: false // default false
12    })
13  ]
14};
15

3. test mock with curl

1➜  ~ curl -X GET http://127.0.0.1:4000/api/user
2{"id":1,"username":"kenny","sex":6}
3➜  ~ curl -X GET http://127.0.0.1:4000/api/user/list
4[{"id":1,"username":"kenny","sex":6},{"id":2,"username":"kenny","sex":6}]
5➜  ~ curl -H "Accept: application/json" -H "Content-type: application/json" -X POST -d '{"username":"admin","password":"888888"}' http://127.0.0.1:4000/api/login/account
6{"status":"ok","code":0,"token":"sdfsdfsdfdsf","data":{"id":1,"username":"kenny","sex":6}}
7➜  ~ curl -X DELETE http://127.0.0.1:4000/api/user/88
8{"status":"ok","message":"delete success!"}

Options

entry

mock config entry，The default value is./mock/index.js.

watchFiles

watch file or dir change refresh mock, include default entry and entry file directory

watchOptions

extension option from chokidar option

ignore

ignore file change, support function or regex, It is used to prevent refresh

debug

Whether to turn on local debugging information，The default value is false

disable

The plugin will only work in a development environment , if you want to disable it, set disable to true, The default value is false