vue里的axios如何獲取本地json數(shù)據(jù)
使用axios獲取本地json數(shù)據(jù)
第一步：在已有的vue項(xiàng)目中安裝axios命令
npm install --save axios
第二步：在main.js里導(dǎo)入下面的代碼
import axios from 'axios'
第三步：在static文件夾下添加testData文件夾，在這個(gè)文件夾下添加data.json文件
第四步：在需要數(shù)據(jù)的頁(yè)面引入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文件,報(bào)404錯(cuò)
昨天剛寫(xiě)的文章，使用axios獲取到本地json文件，今天重啟項(xiàng)目莫名其妙就報(bào)錯(cuò)了
又查詢了一番，折騰了幾個(gè)小時(shí)，找不出原因。重新百度了一番，最終解決。但是再下次運(yùn)行是否還會(huì)報(bào)錯(cuò)，不太確定，畢竟沒(méi)有找到最終的原因。
解決方案：main.js里
import axios from "axios"; Vue.prototype.axios = axios;
json文件存放在public文件夾下
在要用到的頁(yè)面上
網(wǎng)上的教程一直都有要在main.js里加那兩行代碼，但是我發(fā)現(xiàn)我注掉的話也不影響結(jié)果。
所以嘗試的時(shí)候還是按自己的來(lái)，能出來(lái)效果就行
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js 打包時(shí)出現(xiàn)空白頁(yè)和路徑錯(cuò)誤問(wèn)題及解決方法
這篇文章主要介紹了vue.js 打包時(shí)出現(xiàn)空白頁(yè)和路徑錯(cuò)誤問(wèn)題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
vue cli3.0打包上線靜態(tài)資源找不到路徑的解決操作
這篇文章主要介紹了vue cli3.0打包上線靜態(tài)資源找不到路徑的解決操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了vue-品牌管理案例-指令和過(guò)濾器的相關(guān)知識(shí)，文中通過(guò)代碼給大家介紹了過(guò)濾器的基本使用,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)用戶登錄切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了mpvue+vant app搭建微信小程序的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
vue3項(xiàng)目如何國(guó)際化實(shí)戰(zhàn)指南
像很多大型的網(wǎng)址,特別是跨國(guó)際等公司網(wǎng)頁(yè),訪問(wèn)來(lái)自世界各地用戶,所以網(wǎng)頁(yè)的國(guó)際化極其重要的需求,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目如何國(guó)際化的相關(guān)資料,需要的朋友可以參考下2022-09-09
VUE+elementui組件在table-cell單元格中繪制微型echarts圖
這篇文章主要介紹了VUE+elementui組件在table-cell單元格中繪制微型echarts圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue SPA 初次進(jìn)入加載動(dòng)畫(huà)實(shí)現(xiàn)代碼
今天小編就為大家分享一篇Vue SPA 初次進(jìn)入加載動(dòng)畫(huà)實(shí)現(xiàn)代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue3+ts實(shí)際開(kāi)發(fā)中該如何優(yōu)雅書(shū)寫(xiě)vue3語(yǔ)法
近嘗試上手 Vue3+TS+Vite,所以下面這篇文章主要給大家介紹了關(guān)于vue3+ts實(shí)際開(kāi)發(fā)中該如何優(yōu)雅書(shū)寫(xiě)vue3語(yǔ)法的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03