Skip to content

如何写一个mockjs的vite插件

功能是拦截某个接口请求,并使用mockjs返回模拟数据

ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import type { Plugin } from 'vite';
import mockjs from 'mockjs';
import url from 'node:url';
// vite插件,插件是一个函数,返回一个对象
const viteMockServer = (): Plugin => {
    return {
        name: 'vite-plugin-mock',
        configureServer: (server) => { // 配置开发服务器(查vite官方文档)
            server.middlewares.use('/api/mock/list', (req, res) => {
                const parseurl = url.parse(req.originalUrl, true).query;
                res.setHeader('Content-Type', 'application/json');
                const data = mockjs.mock({
                    'list|2000': [
                        {
                            id: '@guid',
                            name: parseurl.key,
                            age: '@integer(18, 30)',
                            address: '@county(true)',
                        },
                    ],
                });
                res.end(JSON.stringify(data));
            });
        },
    };
};

// https://vite.dev/config/
export default defineConfig({
    plugins: [react(), viteMockServer()], // 使用插件
});