实际工作现状

实际工作中前后端分离的情况下，前后端达成接口协议，前端往往需要根据接口文档mock数据。这些数据基本都是静态数据，有的可能是写死在代码中，等到后端开启服务调试再替换这部分mock数据，有的可能是读取静态json、js等文件获取mock数据，实现页面效果，但是实际调用接口和读取文件获取mock数据，两种方式是存在差异的，正式与后端对接接口时又需要调整代码。那我就想能不能直接在dev环境下直接调用接口的时候就调取到mock数据，而在不修改任何代码的情况下直接build，打包出来的页面请求的就是正式接口呢。

实现过程

为了高效快捷的开发，我搭建了一个VUE+MOCK的DEMO，最主要的就是解决了以上提到的问题。

这边提供一下我的思路：把所有接口写入配置文件。在dev模式下，node启动webpack时，通过webpack读取到接口配置，并做好接口代理。然后通过node的环境变量来识别环境。若是dev环境把所有接口的HOST换成本地HOST，这样请求接口直接进入接口代理，通过代理获取mock数据。若是pro环境则直接请求配置文件中的正式接口。

以下截图分别为mock配置，请求接口，以及dev环境下接口返回结果。

另外此demo还配置了一键启用，自由切换是否mock数据，以及对未启用mock数据直接调试接口自动做了跨域代理，方便大家在实际开发中更好更快的开发。

具体代码实现，大家可以看看我的demo，也希望大家给出一些改进建议，希望可以多多交流学习。
demo地址：FastDev-VUE