需求：

前後端分離的開發中，需要前後端同時開發，但是在後端完成前，暫時是沒有資料返回給前端使用的，如果先寫靜態後面再改，就有重複工作的內耗存在。所以我們需要一種簡單快速的模擬資料的模組，本文選的是mockjs。

配置：

1，npm安裝依賴

npm install mockjs --save-dev

2，新建mock資料夾，裡面再新建index.js檔案和MyInfo.js檔案，index.js作為mock索引，MyInfo.js用於存放資料。

檔案結構圖如下：

MyInfo.js程式碼如下：

const page1 = [
  {
    code: 200,
    data: ['中學時暗戀班花，被同班的女漢子知道了，連忙請她保密，本以為向來爽朗不羈的她是不屑告密的，結果丫飛快的把我出賣了。 後來想想，也可能是我拜託她的方式不對，不該說什麼這是男人之間的約定。']
  }
]
const res = {
  page1
}
export default res
 

index.js程式碼如下：

import Mock from 'mockjs'
import MyInfo from './MyInfo.js'
Mock.mock('http://127.0.0.1/main.php?cid=1', 'post', () => {
  return MyInfo.page1
})

3，main.js增加如下程式碼(開發中上測試環境和後端聯調，需要禁用mock時，註釋這段程式碼就可以)：

require('./mock/index.js')

驗證：

home.vue請求中新增如下程式碼輸出到控制檯驗證:

      //資料請求計數
       this.num+=1;
      //請求資料
      const res = await this.$http.post('http://127.0.0.1/main.php?cid='+this.num);
      console.log(this.num,res);
 

備註：

此設定已驗證OK，需要看原始碼的同學，可以克隆如下專案檢視(請求在home.vue中，其他在main.js和mock資料夾中)：
demo的github地址：https://github.com/tom-wong666/xiaoa.git