在vue中读取本地Json文件的方法
更新时间：2018年09月06日 11:19:25 作者：小阳style
今天小编就为大家分享一篇在vue中读取本地Json文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
其实关于这个问题，网上已经可以找到些方法，不过基本上没有完整的，或者是其中有些坑，下面写一下自己的亲身实践。
使用vue读取本地json文件需要安装vue-resource插件，然后使用它的$http.get来读取json文件。
json文件应该是必须放在static目录下
然后使用npm install 命令安装vue-resource，太慢的话就使用淘宝镜像安装,安装完成后先引用这个组件。
在main.js文件中添加：
import VueResource from 'vue-resource'
然后：
Vue.use(VueResource)
最后读取json数据：
this.$http.get('static/map/china.json').then(res => {
console.log("json数据为:" + res.body)//此处的res对象包含了json的文件信息和数据，我们需要的json数据存在于body属性中
})
这样就能读取json数据了！
以上这篇在vue中读取本地Json文件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue2.0 datepicker的使用方法，非常不错，具有参考借鉴借鉴价值，需要的朋友参考下2018-02-02
最近公司新启动了个项目，用的是vue框架在做,下面这篇文章主要给大家介绍了关于vue实现token登录验证的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue3+ts+Vuex中使用websocket协议方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
这篇文章主要介绍了vue项目接口管理,所有接口都在apis文件夹中统一管理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
鼠标移入时的小手、鼠标点击时按钮下压弹起的动画、触屏应用点击时的屏幕震动，这些效果也被统称为点击反馈，虽然看似是应用中的细枝末节，但是只要稍微投入一点点心思，带来的用户体验提升是十分明显的,这里作者为小伙伴们推荐一种作者最喜欢的点击反馈效果。2021-05-05
这篇文章主要介绍了Vue的hover/click事件如何动态改变颜色和背景色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了vue实现按钮的长按功能,点击按钮实现长按，用户需要按下按钮几秒钟，然后触发相应的事件，本文通过实例代码给大家分享实现思路，感兴趣的朋友一起看看吧2022-01-01
这篇文章主要为大家详细介绍了vue2手机APP项目添加开屏广告或者闪屏广告的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
随着Vue的使用越来越多,对Vue的其他知识点也开始逐渐多了解一点,这次做页面上的计算,用了Watch侦听器,这篇文章主要给大家介绍了关于Vue中侦听器基本用法的相关资料,需要的朋友可以参考下2021-08-08
解决element-ui中下拉菜单子选项click事件不触发的问题
今天小编就为大家分享一篇解决element-ui中下拉菜单子选项click事件不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论