vue-cli3使用mock

在项目中创建一个 mock 文件夹,里面的文件为 xxx.json 类型

image.png

// swipe.json
{
  "status": 0,
  "message": [
    {
      "id": 1,
      "img": "http://www.33lc.com/article/UploadPic/2012-8/20128161021784940.jpg"
    },
    {
      "id": 2,
      "img": "http://pic1.win4000.com/wallpaper/c/537d6d7bbfe70.jpg"
    },
    {
      "id": 3,
      "img": "http://www.wallcoo.com/human/Yokohama_Night_View/wallpapers/1440x900/yokohama_img_79009.jpg"
    },
    {
      "id": 4,
      "img": "http://attach.bbs.miui.com/forum/201304/01/143356iyko7yja01z1zocc.jpg"
    },
    {
      "id": 5,
      "img": "http://www.wallcoo.com/human/Yokohama_Night_View/wallpapers/1440x900/yokohama_img_25017.jpg"
    },
    {
      "id": 6,
      "img": "http://img.pconline.com.cn/images/upload/upc/tx/softbbs/1011/22/c0/5947950_1290393874324_1024x1024soft.jpg"
    }
  ]
}

在项目根目录创建 vue.config.js 文件，输入下面内容，配置 mock

const swipeData = require("./mock/swipe.json");
const lalaData = require("./mock/lala.json");

module.exports = {
  //...  
  devServer: {
    port: 8080,
    before(app) {
      app.get("/api/index", (req, res) => {
        res.json(swipeData);
      });
      app.get("/api/main", (req, res) => {
        res.json(lalaData);
      });
    }
  }
};

在需要使用的 文件中 调用 mock,
需要先安装 axios
安装方法 npm install axios --save

<script>
import axios from "axios";

export default {
  name: "home",
  data() {
    return {
      // ...
    };
  },
  components: {
    // ...
  },
  mounted() {
    this.getHomeData();
  },
  methods: {
    getHomeData() {
      axios.get("/api/index").then(res => {
        console.log(res)
        }
      });
    }
  }
};
</script>