vue里的axios如何獲取本地json數(shù)據(jù)
更新時間：2022年08月12日 08:53:47 作者：yuhuamei
這篇文章主要介紹了vue里的axios如何獲取本地json數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用axios獲取本地json數(shù)據(jù)
第一步：在已有的vue項目中安裝axios命令
npm install --save axios
第二步：在main.js里導(dǎo)入下面的代碼
import axios from 'axios'
第三步：在static文件夾下添加testData文件夾，在這個文件夾下添加data.json文件
第四步：在需要數(shù)據(jù)的頁面引入axios，異步加載數(shù)據(jù)
import axios from 'axios';
export default {
name:"",
data() {
return{}
},
mounted(){
this.loadData();
},
methods:{
async loadData(){
await axios.get("http://localhost:8080/static/testData/data.json").then(res =>{
console.log(res);
})
}
}
}
使用axios獲取本地json文件,報404錯
昨天剛寫的文章，使用axios獲取到本地json文件，今天重啟項目莫名其妙就報錯了
又查詢了一番，折騰了幾個小時，找不出原因。重新百度了一番，最終解決。但是再下次運行是否還會報錯，不太確定，畢竟沒有找到最終的原因。
解決方案：main.js里
import axios from "axios"; Vue.prototype.axios = axios;
json文件存放在public文件夾下
在要用到的頁面上
網(wǎng)上的教程一直都有要在main.js里加那兩行代碼，但是我發(fā)現(xiàn)我注掉的話也不影響結(jié)果。
所以嘗試的時候還是按自己的來，能出來效果就行
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
typescript不僅可以約束我們的編碼習(xí)慣，還能起到注釋的作用，當(dāng)我們看到一函數(shù)后我們立馬就能知道這個函數(shù)的用法。這篇文章主要介紹了在Vue組件中使用 TypeScript的方法,需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細(xì)介紹了vue選項卡切換登錄方式小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了Vue 輸入框新增搜索歷史記錄功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
vue3.x使用swiperUI動態(tài)加載圖片失敗的解決方法
這篇文章主要為大家詳細(xì)介紹了vue3.x使用swiperUI動態(tài)加載圖片失敗的解決方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vue3點擊出現(xiàn)彈窗后背景變暗且不可操作的實現(xiàn)代碼
這篇文章主要介紹了vue3點擊出現(xiàn)彈窗后背景變暗且不可操作的實現(xiàn)代碼,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
Vue實現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能的示例詳解
生活中常用的幾種坐標(biāo)有：WGS-84、GCJ-02與BD-09。本文將利用Vue實現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能，即實現(xiàn)GCJ-02坐標(biāo)轉(zhuǎn)換成WGS-84坐標(biāo)，需要的可以參考一下2022-04-04
這篇文章主要介紹了vue不操作dom實現(xiàn)圖片輪播的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了使用vue實現(xiàn)各類彈出框組件,文中給大家提到了vue中常用的dialog組件的封裝，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了關(guān)于vue混入(mixin)的解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue3-HTTP請求方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06