脚本宝典收集整理的这篇文章主要介绍了基于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查看该项目

脚本宝典总结

以上是脚本宝典为你收集整理的基于Vue-Cli的非跨域请求模拟数据(Mock)快速配置更新接口的解决方案全部内容，希望文章能够帮你解决基于Vue-Cli的非跨域请求模拟数据(Mock)快速配置更新接口的解决方案所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。