在vue中讀取本地Json文件的方法

其實關(guān)于這個問題，網(wǎng)上已經(jīng)可以找到些方法，不過基本上沒有完整的，或者是其中有些坑，下面寫一下自己的親身實踐。

成都創(chuàng)新互聯(lián)長期為上千客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為云溪企業(yè)提供專業(yè)的成都網(wǎng)站設計、成都網(wǎng)站建設，云溪網(wǎng)站改版等技術(shù)服務。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

使用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)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。