基于Vue-CLI下的非跨域请求模拟数据接口的解决方案
前几天一直在研究
Mockjs, 不记得从哪里看到这个工具
axios-mock-adapter, 配合了
Mockjs在
Vue-cli下可以模拟数据接口, 也不存在跨域问题了.
特点
- 无需额外开启一个mockjs的server
- 不存在跨域问题
- 能够快速实现接口更新
- 模拟虚假的随机数据
配置
需要用到的主要组件包括
我在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查看该项目
