在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文件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
element-ui table表格控件实现单选功能代码实例
这篇文章主要给大家介绍了关于element-ui table表格控件实现单选功能的相关资料,单选框是指在 Element UI 的表格组件中,可以通过单选框来选择一行数据。用户只能选择一行数据,而不能同时选择多行,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue项目根据不同环境进行设置打包命令,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
这篇文章主要给大家介绍了关于Vue3超详细的ref()用法的相关资料,在Vue3中ref函数不仅可以用于在组件中获取DOM元素或子组件的引用,还可以直接访问组件元素本身,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了uni-app 常用API，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器,在BSD-like 协议下发行,下面这篇文章主要给大家介绍了关于ubuntu中利用nginx部署vue项目的相关资料,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了Vue子组件与数据传递问题及需要注意事项，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
vue中使用axios post上传头像/图片并实时显示到页面的方法
今天小编就为大家分享一篇vue中使用axios post上传头像/图片并实时显示到页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了关于vue.js组件数据流的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Vue实现监听dom节点宽高变化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue 中使用vue2-highcharts实现top功能的示例
下面小编就为大家分享一篇Vue 中使用vue2-highcharts实现top功能的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论