基于Vue-CLI下的非跨域请求模拟数据接口的解决方案

前几天一直在研究

Mockjs, 不记得从哪里看到这个工具 , 配合了

Mockjs在

Vue-cli下可以模拟数据接口, 也不存在跨域问题了.

特点

• 无需额外开启一个mockjs的server
• 不存在跨域问题
• 能够快速实现接口更新
• 模拟虚假的随机数据

配置

需要用到的主要组件包括

我在src下建立了一个mock目录, 并创建了index.js存放接口配置和axios相关配置, 其中为了测试, 我在该目录的index.js中写了两个接口, 接口数据有采用mockjs自动生成随机数据. 如果有需要的话, 自行将其模块化.

接着在main.js引入上面写好的mock的配置. 然后我们就可以在组件使用了.

该demo以HelloWorld.vue测试. 在created上请求数据. 并渲染DOM, 点击button可以获取随机的数据列表.

其他

项目地址: , 拉下该项目后, 切换到分支axios-mock-adapter, 当前目录下npm install完成后执行npm run dev, 启动浏览器访问, 查看效果

参阅:

更新:

2018年4月27日 完成该项目操作后, 发现一篇也很不错的, 思路和我差不多的一篇文章, 也推荐大家学习阅读:

貌似segmentFault的外链挂了? 如果文中链接无法正常跳转, 手动在github上搜索

vue-cli-mobile-study查看该项目