Mock.js的使用（Vue项目）

ank_lin

已于 2022-10-09 11:00:38 修改

阅读量556

点赞数

文章标签：前端 npm node.js

于 2022-08-25 10:33:13 首次发布

本文链接：https://blog.csdn.net/MILK_LL/article/details/126518646

版权

本文介绍了Mock.js在Vue项目中的使用，包括安装、配置两种方法。在方法一中，详细说明了在不同场景下的使用步骤。而在方法二中，强调了Mock.js设置的请求地址应与真实请求地址一致，以便于数据的切换。通过在main.js中引入和在需要的地方调用，可以方便地获取和控制Mock数据。

摘要由CSDN通过智能技术生成

一、安装

npm install mockjs

二、配置

方法一：

1.1 mockServe.js--配置请求地址和返回的数据

import Mock from 'mockjs'

import banner from './banner.json'    // mock数据
import floor from './floor.json'    // mock数据

Mock.mock('/mock/banner', { code: 200, data: banner })
Mock.mock('/mock/floor', { code: 200, data: floor })

1.2 在 main.js 中使用

// 引入mockServe.js
import '@/mock/mockServe'

2.1 mock.js--重新封装Axios，因为baseURL不同了

// 模拟数据库mock

// 对axios进行配置(二次封装)
import axios from 'axios'

const mockRequestor = axios.create({
    // 配置对象
    baseURL: '/mock',
    timeout: 5000
})

// 请求拦截器
mockRequestor.interceptors.request.use((config) => {
    retur