Vue3使用 mock.js 模拟后端数据请求的方法

mock.js官网：mockjs.com/

1、首先用npm安装

npm install mockjs

2、然后在src目录下新建一个目录叫“mock”，再目录下新增一个index.js文件作为mock的配置

// 引入Mock文件，由于 Vite 不支持require()方法所以改用import
import * as Mock from 'mockjs'
// 模拟返回的数据格式，可以自己随便定义
const result = {
    
    
    status: 200,
    reset: '0',
    message: 'success',
    data: {
    
    
        'list|1-10': [{
    
    
            'id': '@guid',
            'name': '@cname',
            'age|20-40': 20,
        }]
    }
}
// 用mock拦截对应的请求地址，并发送返回数据对象（这里以正则来匹配带有api/的请求地址）
const responseData = Mock.mock(/api\//, 'get', result)
// 导出返回对象，可以导出多个对象
export default responseData

3、在main.js里引入mock

import {
    
     createApp } from 'vue'
import App from './App.vue'
// 引入上面配置的mock文件
import('./mock/index')

最后使用你自己的ajax请求，填写上面对应的拦截的后端接口地址就可以了