Mockjs使用 | Guidebook

# 使用

import mockjs from 'mockjs'

mockjs.mock('/api/getdata', 'get', {
  code: 200,
  body: {
    name: 'zs',
    age: 20
  }
})

1
2
3
4
5
6
7
8
9

然后在需要使用的页面引入即可

如果使用fetch请求的话，则需要额外安装fetchMock

import fetchMock from 'fetch-mock'
// 初始化 fetch-mock
fetchMock.config.overwriteRoutes = true

fetchMock.mock('/api/getdata1', {
      code: 200,
      data: {
        username: 'mock',
        age: 18
      }
    })

1
2
3
4
5
6
7
8
9
10
11

# 规则

http://mockjs.com/examples.html

@id // 随机身份证
@guid // 随机id
@ip // 随机ip地址

// 数字
"number|1-100": 100   // 随机数字1-100内
"number|+1": 202  // 202开始自增1
// 布尔值
'boolean': '@boolean'
// 或者用0/1代替
'numnber|0-1': 0

// 时间
@date
Random.date('yyyy-MM-dd')
@time

// 姓名
@name
Random.name()
@name(true) // 有middle name

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Vite使用mockjs

在vite中使用mockjs的完整步骤：

安装依赖
配置 vite.config.ts（你已知）
创建 mock/ 目录
编写 mock 文件（url / method / response）
（必须）确保请求没有被vite proxy 吃掉
（可选）在 axios 层做 mock / 非 mock 切换
（调试）通过 Network 验证是否命中 mock

安装vite-plugin-mock

pnpm add vite-plugin-mock mockjs -D

配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig(({ command }) => ({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: 'mock',      // mock 文件夹路径
      enable: command === 'serve', // 仅本地开发启用
      injectCode: `
        import { setupProdMockServer } from './mockProdServer';
        setupProdMockServer();
      `, // 用于生产 mock（可选）
      supportTs: true, // 支持 TypeScript 文件
    })
  ]
}))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

创建mock/user.ts

mock(/\/role\/(\d+)$/, {
    code: 200,
    body: {
        uuid: "1",
        username: "王霞",
        email: "y.grp@qq.com",
        mobile: "13337811783",
        roleIds: ["38", "48", "84", "2"],
        orgIds: ["85", "9", "97"],
        tag: "id quis",
        remark: "Lorem Ut sit",
        createDate: "2006-05-28",
        modifyDate: "1989-08-30",
        modifyUser: "eu velit Ut anim est",
        createUser: "voluptate laborum occaecat",
    },
});

mock(/\/role\/list\?.*/, {
    code: 200,
    body: {
        "content|20": [
            {
                uuid: "@uuid",
                roleName: "@cname",
                tag: "@tag",
                roleIds: ["38", "48", "84", "2"],
                orgIds: ["85", "9", "97"],
                remark: "Lorem Ut sit",
                createDate: "@date",
                modifyDate: "@date",
                modifyUser: "@name",
                createUser: "@name",
            },
        ],
    },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

返回一个本地文件

import { MockMethod } from 'vite-plugin-mock';
import fs from 'fs';
import path from 'path';

export default [
  {
    url: '/api/getFile',
    method: 'get',
    response: () => {
      // 读取本地文件内容
      const filePath = path.resolve(__dirname, '../files/sample.txt'); // 替换为你的文件路径
      const fileContent = fs.readFileSync(filePath, 'utf-8');
      
      return {
        code: 0,
        data: fileContent,
        filename: 'sample.txt',
      };
    },
  },
] as MockMethod[];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

编写mock请求

import { MockMethod } from 'vite-plugin-mock';
import Mock from 'mockjs';

export default [
  {
    // 浏览器发出的完整路径
    url: '/agent/proxyApi/flames-agent-manager/flames/api/v1/share4M/extract',
    method: 'post',
    response: () => {
      return {
        code: 0,
        data: {
          name: Mock.mock('@cname'),
          age: Mock.mock('@integer(20, 50)'),
        },
      };
    },
  },
  {
    url: '/agent/proxyApi/flames-agent-manager/flames/api/v1/share4M/check4Object',
    method: 'post',
    response: () => {
      return {
        code: 0,
        data: {
          name: Mock.mock('@cname'),
          age: Mock.mock('@integer(20, 50)'),
        },
      };
    },
  },
] as MockMethod[];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

可以设置statusCode来模拟HTTP状态码

declare interface MockMethod {
    url: string;
    method?: MethodType;
    timeout?: number;
    statusCode?: number;
    response?: ((this: RespThisType, opt: {
        url: Recordable;
        body: Recordable;
        query: Recordable;
        headers: Recordable;
    }) => any) | any;
    rawResponse?: (this: RespThisType, req: IncomingMessage, res: ServerResponse) => void;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

需要注意的是请求不能被vite proxy代理，因为proxy的优先级高于mock

← Floating-ui Markdown中数学公式的渲染 →