其實關(guān)于這個問題,網(wǎng)上已經(jīng)可以找到些方法,不過基本上沒有完整的,或者是其中有些坑,下面寫一下自己的親身實踐。
使用vue讀取本地json文件需要安裝vue-resource插件,然后使用它的$http.get來讀取json文件。
json文件應該是必須放在static目錄下
然后使用npm install 命令安裝vue-resource,太慢的話就使用淘寶鏡像安裝,安裝完成后先引用這個組件。
在main.js文件中添加:
import VueResource from 'vue-resource'
然后:
Vue.use(VueResource)
最后讀取json數(shù)據(jù):
this.$http.get('static/map/china.json').then(res => { console.log("json數(shù)據(jù)為:" + res.body)//此處的res對象包含了json的文件信息和數(shù)據(jù),我們需要的json數(shù)據(jù)存在于body屬性中})
這樣就能讀取json數(shù)據(jù)了!
以上這篇在vue中讀取本地Json文件的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答