前后端分离的开辟模式，前端必要向后端哀求数据（ajax哀求），但实际开辟过程中，前后端会约定一份接口文档，但前后端开辟进度并不同等，当后端没有美满接口功能时，前端必要在当地模拟数据返回，此时必要利用到mockjs。
安装mock
npm install mockjs --save-dev创建mock文件夹
mock下创建index.ts、types.ts 以及你必要利用到的模块的.ts文件。
inde.ts文件代码：
import Mock from 'mockjs'import { MockParams } from './types'import api from './api'// 必要遍历的哀求const mocks = [...api]// 设置200-2000毫秒延时哀求数据Mock.setup({ timeout: '200-2000'})// 接口拦截export function mockRequest() { let i: MockParams for (i of mocks) { Mock.mock(new RegExp(i.url), i.type || 'get', i.response) }}types.ts文件代码：
// 定义参数范例export interface MockParams { url: string type: string data?: any params?: any response(option?: any): Record<string, unknown>}api.ts文件代码：
const tokens = { admin: { password: 123456, token: 'admin-token' }, editor: { password: 123456, token: 'editor-token' }}// get哀求从config.url获取参数，post从config.body中获取参数function paramObj(url) { const search = url.split('?')[1] if (!search) { return {} } return JSON.parse( '{"' + decodeURIComponent(search) .replace(/"/g, '\\"') .replace(/&/g, '","') .replace(/=/g, '":"') + '"}' )}const api = [ // 登陆接口 { url: '/user/login', type: 'get', response: (config) => { const { username } = paramObj(config.url) const token = tokens[username].token if (token) { return { code: 0, message: '操作乐成', data: { token: token } } } return { code: 1, message: '用户信息错误，请重试~', data: {} } } }]export default api最后在main.ts引入
/** * 测试情况下 引入自定义的mockRequest * 由于mockRequest不是默认导出的：export default{} * 以是引入时必要加大括号，这种可以引入多个 */if (process.env.NODE_ENV === 'development') { const { mockRequest } = require('../mock') mockRequest()}在shims-vue.d.ts中添加声明
declare module 'mockjs' |
