过程：

一、安装相关依赖

参照 Vue+Mock.js，模拟接口数据 依赖安装

二、新建mock文件夹

index.js为mockjs引入以及接口设置；

json文件夹保存模拟接口json数据；

## index.js

const Mock = require("mockjs");
//格式： Mock.mock( url, post/get , 返回的数据)；
Mock.mock("/user/userInfo", "get", require("./json/userInfo"));
// Mock.mock("/home/banner", "get", require("./json/homeBanner"));
## userInfo.json
{
  "result": "success",
  "data": {
    "id": "@id()",
    "username": "@cname()", 
    "date": "@date()", 
    "ip": "@ip()", 
    "email": "@email()"
  },
  "msg": ""
}

三、引入mock

在main.js中引入mock

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "@/plugins/vant";
import "lib-flexible";

// 引入mock，不需要则注释
require("./mock/index");
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

四、使用接口

  axios
      .get("/user/userInfo")
      .then((res) => {
        this.content = res.data;
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });

获取接口数据

参考资料：

vue mock数据，模拟后台接口

https://blog.csdn.net/weixin\_45549737/article/details/119041754

最后修改：2023 年 08 月 26 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏