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)文章
vue.js 打包時出現(xiàn)空白頁和路徑錯誤問題及解決方法
這篇文章主要介紹了vue.js 打包時出現(xiàn)空白頁和路徑錯誤問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue cli3.0打包上線靜態(tài)資源找不到路徑的解決操作
這篇文章主要介紹了vue cli3.0打包上線靜態(tài)資源找不到路徑的解決操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue-品牌管理案例-指令和過濾器的相關(guān)知識，文中通過代碼給大家介紹了過濾器的基本使用,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)用戶登錄切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了mpvue+vant app搭建微信小程序的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
像很多大型的網(wǎng)址,特別是跨國際等公司網(wǎng)頁,訪問來自世界各地用戶,所以網(wǎng)頁的國際化極其重要的需求,下面這篇文章主要給大家介紹了關(guān)于vue3項目如何國際化的相關(guān)資料,需要的朋友可以參考下2022-09-09
VUE+elementui組件在table-cell單元格中繪制微型echarts圖
這篇文章主要介紹了VUE+elementui組件在table-cell單元格中繪制微型echarts圖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue SPA 初次進(jìn)入加載動畫實現(xiàn)代碼
今天小編就為大家分享一篇Vue SPA 初次進(jìn)入加載動畫實現(xiàn)代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue3+ts實際開發(fā)中該如何優(yōu)雅書寫vue3語法
近嘗試上手 Vue3+TS+Vite,所以下面這篇文章主要給大家介紹了關(guān)于vue3+ts實際開發(fā)中該如何優(yōu)雅書寫vue3語法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue項目前端埋點的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03