1.安装 mockjs

npm install --save mockjs  
npm install axios

2.创建 mockjs 文件

（1）在src目录手动创建/src/mockjs/mockServer.js文件夹与文件

（2）在main.js文件中引入创建的mockServer文件

import "@/mockjs/mockServer";

（3）/mockjs/mockServer.js文件中模拟常用请求方式，并返回数据

import mockjs from "mockjs";
import chart from "./charts.json"; //和下面的data: chart 对应
//   /mock/menu 是路径
mockjs.mock("/mock/chart", { code: 200, data: chart });
// 模拟登录
mockjs.mock("/mock/login", "post", (req) => {
    const { password, username } = JSON.parse(req.body);
    if (username === "admin" && password === "zxg654321") {
        return {
            code: 200,
            msg: "success",
        };
    }
});

charts.json文件：

3.使用 mockjs 模拟接口与数据

（1）在src目录手动创建 /src/api/mockRequest.js文件

公共请求文件 mockRequest.js 封装案例，封装起来方便后续换线上接口。

import axios from "axios";

// 利用axios对象的create方法，去创建一个案axios实例
// requests就是案axios，只不过稍微配置一下
const requests = axios.create({
	// 配置对象
	// 基础路径，发请求的时候，路径当中会出现mock
	baseURL: "/mock",
	timeout: 5000,
});
// 请求拦截器，在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
	// config配置对象，对象里面有一个属性很重要，headers请求头
	return config;
});
// 响应拦截器
requests.interceptors.response.use(
	(res) => {
		return res.data;
	},
	(error) => {
		return Promise.reject(new Error("failed"));
	}
);
export default requests;

（2）在src目录手动创建 /src/api/mockRequestFun.js文件

import mockRequests from "./mockRequest";
// 获取chart方法
export function getChartsData() {
	return mockRequests({
		url: "/chart",
		method: "get",
	});
}
// 登录方法
export function Login(user) {
	return mockRequests({
		url: "/login",
		method: "post",
		data: user,              
	});
}

4.vue文件中使用mockjs请求

import { getChartsData } from "@/api/mockRequestFun";
getChartsData().then((response) => {
    if (response.code == 200) {
        console.log("第一个数组数据是：", response.data[0]);
        this.chartsdata = response.data;		      
    }
});

import { Login } from "@/api/mockRequestFun";
//登录按钮
login() {
    // 调用登录接口
    Login(this.loginform).then((response) => {
        if (response.code === 200) {
            this.$router.push({ path: "/home" });
        }
    });
},

原文链接：blog.csdn.net/zxd14355137…