在vue中讀取本地Json文件的方法
更新時間：2018年09月06日 11:19:25 作者：小陽style
今天小編就為大家分享一篇在vue中讀取本地Json文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
其實(shí)關(guān)于這個問題，網(wǎng)上已經(jīng)可以找到些方法，不過基本上沒有完整的，或者是其中有些坑，下面寫一下自己的親身實(shí)踐。
使用vue讀取本地json文件需要安裝vue-resource插件，然后使用它的$http.get來讀取json文件。
json文件應(yīng)該是必須放在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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- npm如何更新VUE package.json文件中依賴的包版本
- vue項(xiàng)目如何讀取本地json文件數(shù)據(jù)實(shí)例
- vue引用json文件的方法小結(jié)
- Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)
- Vue實(shí)現(xiàn)數(shù)據(jù)導(dǎo)入的四種方法(resource、Axios、Fetch、Excel導(dǎo)入)
- vue?組件異步加載方式(按需加載)
- 解決vue動態(tài)路由異步加載import組件,加載不到module的問題
- vue異步加載高德地圖的實(shí)現(xiàn)
- Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程
相關(guān)文章
vue使用element-plus依賴實(shí)現(xiàn)表格增加的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue使用element-plus依賴實(shí)現(xiàn)表格增加,文中示例代碼講解的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2023-12-12
解決Vue項(xiàng)目Network:?unavailable的問題
項(xiàng)目只能通過Local訪問而不能通過Network訪問,本文主要介紹了解決Vue項(xiàng)目Network:?unavailable的問題,具有一定的參考價值,感興趣的可以了解一下2024-06-06
vue-router路由懶加載及實(shí)現(xiàn)的3種方式
這篇文章主要給大家介紹了關(guān)于vue-router路由懶加載及實(shí)現(xiàn)的3種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
在Vue3項(xiàng)目中使用Jest配置生成測試報告的示例詳解
在Vue 3項(xiàng)目中使用Jest進(jìn)行單元測試是一種常見的做法,它可以幫助我們驗(yàn)證代碼的正確性和穩(wěn)定性,本文將介紹如何在Vue 3項(xiàng)目中配置Jest,以生成測試報告,需要的朋友可以參考下2023-09-09
Vue3組件異步更新和nextTick運(yùn)行機(jī)制源碼解讀
這篇文章主要為大家介紹了Vue3組件異步更新和nextTick運(yùn)行機(jī)制源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了vue中的Key值重復(fù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)
這篇文章主要介紹了使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
基于vue監(jiān)聽滾動事件實(shí)現(xiàn)錨點(diǎn)鏈接平滑滾動的方法
本篇文章主要介紹了基于vue監(jiān)聽滾動事件實(shí)現(xiàn)錨點(diǎn)鏈接平滑滾動的方法，非常具有實(shí)用價值，有興趣的可以了解一下2018-01-01
我們的vue2.0項(xiàng)目當(dāng)中,存儲了許多圖片和視頻資源,所以我們需要增加防盜鏈設(shè)置,但是這樣一來,當(dāng)我們將其他網(wǎng)站上的視頻資源,想入到我們的環(huán)境當(dāng)中的時候,會報錯,所以本文給大家介紹了在vue中使用iframe解決視頻資源的防盜鏈,需要的朋友可以參考下2023-12-12
淺談Vuex@2.3.0 中的 state 支持函數(shù)申明
這篇文章主要介紹了淺談Vuex@2.3.0 中的 state 支持函數(shù)申明，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11