vue3 使用mockjs

weixin_45044818

已于 2022-04-04 18:32:32 修改

阅读量3.6k

点赞数 5

分类专栏： vue 文章标签： vue.js 前端

于 2022-04-04 18:20:11 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45044818/article/details/123957709

版权

本文介绍了在Vue3项目中使用Mockjs模拟接口请求的背景、安装、配置过程，以及如何发起请求和响应处理。通过在src下创建mock文件夹并编写模拟数据，实现了在后端接口未准备好时前端的正常开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章