vue3 使用mockjs

1. 背景

在如今的项目开发中，基本上使用的都是前后端分离的开发模式，前后端在开发前会约定一份开发文档，规定接口的结构。如果后端接口没有写好或者没有环境可以让你去调用这个接口，如果这时，什么都不做，也会影响开发的一个效率，所以前端可以使用mock来模拟接口请求。本文章在vue-cli3项目中配置mock。

2. 安装mock

npm install mockjs --save

3. 配置mock

在项目的src下创建一个mock文件夹，mock文件夹里面的文件如图所示
_createMock.ts文件查找到当前目录下的所有文件，除了_createMock.ts以及utils.ts，注册里面所有的mock
代码如下:

import {
    mockInterfaceModel } from '@/api/model/mockModel'

// 首先引入Mock
const Mock = require('mockjs')

// 设置拦截ajax请求的相应时间
Mock.setup({
   
  timeout: '200-600'
})

let configArray = []

// 使用webpack的require.context()遍历所有Mock文件
const files = require.context('.', true, /\.ts$/)
files.keys().forEach((key) => {
   
  if (key === './_createMock.ts' || key === './utils.ts') return
  configArray = configArray.concat(files(key)</