---
title: "Vue使用Mook模拟数据"
id: "3161"
type: "post"
slug: "vue%e4%bd%bf%e7%94%a8mook%e6%a8%a1%e6%8b%9f%e6%95%b0%e6%8d%ae"
published_at: "2020-10-02T05:24:24+00:00"
modified_at: "2020-10-02T05:24:24+00:00"
url: "https://seq.ink/all/3161.html"
markdown_url: "https://seq.ink/all/3161.html.md"
excerpt: "1.在项目根目录建立 vue.config.js module.exports = { devServer: { before(app, server) { // get请求 app.get(\"/api/cartList\", (req, r ..."
taxonomy_category:
  - "ALL"
  - "Coding代码堆"
---

1.在项目根目录建立 `vue.config.js`

```
module.exports = {
  devServer: {
    before(app, server) {
      // get请求
      app.get("/api/cartList", (req, res) => {
        res.json({
          result: [
            {
              id: 0,
              title: "烤鸡翅",
              price: 15,
              active: true,
              count: 1
            },
            {
              id: 1,
              title: "烤腰子",
              price: 28,
              active: true,
              count: 1
            },
            {
              id: 2,
              title: "烤大蒜",
              price: 50,
              active: true,
              count: 1
            },
            {
              id: 3,
              title: "烤鸡脖",
              price: 88,
              active: true,
              count: 1
            }
          ]
        });
      });
    }
  }
};
```

随后重启项目 模拟出来的后端接口在`你项目的地址/api/cartList`

下载`axios` 在`main.js`全局挂载

```
import axios from "axios";
Vue.prototype.$http = axios;
```

最后在任意一个组件内使用 this.$http 进行axios请求