基于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查看该项目