vue里的axios如何獲取本地json數(shù)據(jù)
使用axios獲取本地json數(shù)據(jù)
第一步:在已有的vue項目中安裝axios命令
npm install --save axios
第二步:在main.js里導入下面的代碼
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)我注掉的話也不影響結果。
所以嘗試的時候還是按自己的來,能出來效果就行
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue.js 打包時出現(xiàn)空白頁和路徑錯誤問題及解決方法
這篇文章主要介紹了vue.js 打包時出現(xiàn)空白頁和路徑錯誤問題及解決方法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue cli3.0打包上線靜態(tài)資源找不到路徑的解決操作
這篇文章主要介紹了vue cli3.0打包上線靜態(tài)資源找不到路徑的解決操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
VUE+elementui組件在table-cell單元格中繪制微型echarts圖
這篇文章主要介紹了VUE+elementui組件在table-cell單元格中繪制微型echarts圖,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
vue3+ts實際開發(fā)中該如何優(yōu)雅書寫vue3語法
近嘗試上手 Vue3+TS+Vite,所以下面這篇文章主要給大家介紹了關于vue3+ts實際開發(fā)中該如何優(yōu)雅書寫vue3語法的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10

