Vue简单引入Mock.js，模拟接口数据

leesong

2023 年 04 月 03 日

319 次浏览

暂无评论

1638字数

学习记录

# **过程：**

## **一、安装相关依赖**

**参照 **[Vue+Mock.js，模拟接口数据](http://blog.leesong.top/index.php/2023/04/03/vuemock-js%ef%bc%8c%e6%a8%a1%e6%8b%9f%e6%8e%a5%e5%8f%a3%e6%95%b0%e6%8d%ae/) 依赖安装

## **二、新建mock文件夹**

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

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

![](https://blog.leesong.top/usr/uploads/2023/08/3706848753.png)

```
## 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);
      });
```

![](https://blog.leesong.top/usr/uploads/2023/08/1149368496.png)

**获取接口数据**

# **参考资料：**

> **vue mock数据，模拟后台接口**
>
> [https://blog.csdn.net/weixin](https://blog.csdn.net/weixin)\_**45549737/article/details/119041754**

最后修改：2023 年 08 月 26 日