實際工作現(xiàn)狀

實際工作中前后端分離的情況下，前后端達成接口協(xié)議，前端往往需要根據(jù)接口文檔mock數(shù)據(jù)。這些數(shù)據(jù)基本都是靜態(tài)數(shù)據(jù)，有的可能是寫死在代碼中，等到后端開啟服務(wù)調(diào)試再替換這部分mock數(shù)據(jù)，有的可能是讀取靜態(tài)json、js等文件獲取mock數(shù)據(jù)，實現(xiàn)頁面效果，但是實際調(diào)用接口和讀取文件獲取mock數(shù)據(jù)，兩種方式是存在差異的，正式與后端對接接口時又需要調(diào)整代碼。那我就想能不能直接在dev環(huán)境下直接調(diào)用接口的時候就調(diào)取到mock數(shù)據(jù)，而在不修改任何代碼的情況下直接build，打包出來的頁面請求的就是正式接口呢。

實現(xiàn)過程

為了高效快捷的開發(fā)，我搭建了一個VUE+MOCK的DEMO，最主要的就是解決了以上提到的問題。

這邊提供一下我的思路：把所有接口寫入配置文件。在dev模式下，node啟動webpack時，通過webpack讀取到接口配置，并做好接口代理。然后通過node的環(huán)境變量來識別環(huán)境。若是dev環(huán)境把所有接口的HOST換成本地HOST，這樣請求接口直接進入接口代理，通過代理獲取mock數(shù)據(jù)。若是pro環(huán)境則直接請求配置文件中的正式接口。

以下截圖分別為mock配置，請求接口，以及dev環(huán)境下接口返回結(jié)果。

另外此demo還配置了一鍵啟用，自由切換是否mock數(shù)據(jù)，以及對未啟用mock數(shù)據(jù)直接調(diào)試接口自動做了跨域代理，方便大家在實際開發(fā)中更好更快的開發(fā)。

具體代碼實現(xiàn)，大家可以看看我的demo，也希望大家給出一些改進建議，希望可以多多交流學習。

demo地址：FastDev-VUE