基於Vue-Cli的非跨域請求模擬數據(Mock)快速配置更新接口的解決方案

基於Vue-CLI下的非跨域請求模擬數據接口的解決方案

前幾天一直在研究 Mockjs, 不記得從哪裏看到這個工具 axios-mock-adapter, 配合了 Mockjs在 Vue-cli下能夠模擬數據接口, 也不存在跨域問題了.

特色

• 無需額外開啓一個mockjs的server
• 不存在跨域問題
• 可以快速實現接口更新
• 模擬虛假的隨機數據

配置

須要用到的主要組件包括

• axios
• axios-mock-adapter
• mockjs

我在src下創建了一個mock目錄, 並建立了index.js存放接口配置和axios相關配置, 其中爲了測試, 我在該目錄的index.js中寫了兩個接口, 接口數據有采用mockjs自動生成隨機數據. 若是有須要的話, 自行將其模塊化.

接着在main.js引入上面寫好的mock的配置. 而後咱們就能夠在組件使用了.

該demo以HelloWorld.vue測試. 在created上請求數據. 並渲染DOM, 點擊button能夠獲取隨機的數據列表.

其餘

項目地址: vue-cli-mobile-study, 拉下該項目後, 切換到分支axios-mock-adapter, 當前目錄下npm install完成後執行npm run dev, 啓動瀏覽器訪問, 查看效果

參閱: 改造vue-cli,使用mockjs搭建mock server

---

更新:

2018年4月27日 完成該項目操做後, 發現一篇也很不錯的, 思路和我差很少的一篇文章, 也推薦你們學習閱讀: 學習不同的vue4:mock與axios實戰1

貌似segmentFault的外鏈掛了? 若是文中連接沒法正常跳轉, 手動在github上搜索 vue-cli-mobile-study查看該項目