关于mock数据的重要性，就不用多说了吧，用过的人自然懂得,话不多说，先上官网：mockjs.com/

src=http___n.sinaimg.cn_sinakd20210821s_400_w1280h720_20210821_878d-1f070768e7d485ba695d2138a67f584d.jpg&refer=http___n.sinaimg.webp

那么如何再我们自己的vue项目中使用mock呢，接下来就捋一下：

1.安装mock

npm install --save mockjs

2.自己写模拟数据(如果有现成的，也可以直接放到自己的项目中),模拟数据，其实就是json数据，示例如下：

[
    {
        "id": "1",
        "imgUrl": "/images/banner1.jpg"
    },
    {
        "id": "2",
        "imgUrl": "/images/banner2.jpg"
    },
    {
        "id": "3",
        "imgUrl": "/images/banner3.jpg"
    },
    {
        "id": "4",
        "imgUrl": "/images/banner4.jpg"
    }
]

3.在我们项目中创建mock文件夹，存放json数据，项目结构如下：

4.同时我们也要在mock文件夹中创建一个js文件，mockServer.js，开始正式模拟数据

//引入mockjs开始模拟数据
import Mock from 'mockjs'

// 在webpack中，图片json不需要对外暴露(里面不能书写export关键字)
// 这些资源默认对外暴露

//引入数据
import banner from './banner.json'
import floor from './floor.json'

//第一个参数：接口的地址
//第二个参数：向这个接口发送请求获取到的数据

// 中间默认是get请求
Mock.mock('/mock/banner',{code:200,data:banner})
//mock插件：中间默认是get请求
Mock.mock('/mock/floor',{code:200,data:floor})

注意：

1. 我们刚才写的json文件时没有向外暴露的，因为在webpack中图片和json文件时不需要向外暴露的，默认就暴露了
2. mockServer.js也是不需要向外暴露的，不需要写export

5.mockServer.js没有向外暴露，那我们项目中应该如何使用呢？直接在main.js中引入即可： main.js

import '@/mock/mockServer.js'

6.我们在项目中都二次封装axios,然后打开我们封装axios的文件,代码如下：

我们设置的请求的接口都是以 /api开始 但是我们使用mock，都是以 /mock 开始，所以这块是不符合的，那么改怎么办呢，我们只需要把二次封装axios的代码重新复制一份，然后新建一个js，mockRequest.js,给新建的mockRequest.js中保存一份即可，但要把 /api 修改为 /mock，修改后的代码如下：