vite-plugin-mock

安装依赖

npm install mockjs -D
npm install vite-plugin-mock -D

配置mock.ts

import { viteMockServe } from 'vite-plugin-mock';
export default function createMock(env, isBuild) {
    return viteMockServe({
        mockPath: 'mock',    // mock文件路径制定为 mock
        localEnabled: !isBuild, // 设置是否启用本地数据文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能
        prodEnabled: isBuild,   // 设置打包是否启用 mock 功能
        injectFile: 'src/main.ts',    // injectCode 代码注入的文件,默认为项目根目录下 src/main.{ts,js}
        injectCode: `
            import { setupProdMockServer } from './mockProdServer';
            setupProdMockServer();
        `,    // 注入的代码
        supportTs: true,    // 打开后可以读取 ts 模块，但是将无法监视 js 文件
        watchFiles: true    // 设置是否监视 mockPath 对应的文件夹内文件中的更改 
    })
}

添加mock文件

在根目录创建mock文件夹（文件夹路径与配置中mockPath对应），然后添加数据文件，例如：

export default [
    {
        url: '/mock/login',
        method: 'post',
        response: option => {
            return {
                code: 200,
                message: 'success',
                data: {
                    token: 'abcde12412423'
                }
            }
        }
    },
    {
        url: '/mock/user/permissions',
        method: 'get',
        response: option => {
            return {
                code: 200,
                message: 'success',
                data: {
                    permissions: [
                        'system:user:add',
                        'system:user:edit',
                        'system:user:delete'
                    ]
                }
            }
        }
    }
]

编写mockProdServer.ts文件

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
const mocks: any[] = [];
// 导入mock文件夹下所有的数据文件
const mockContext = import.meta.globEager('../mock/*.ts');
Object.keys(mockContext).forEach(i => {
    mocks.push(...mockContext[i].default);
})
export function setupMockServer() {
    createProdMockServer(mocks);
}