Vue3實現(xiàn)通過axios來讀取本地json文件
更新時間：2024年07月26日 10:22:12 作者：Kingsaj
這篇文章主要介紹了Vue3實現(xiàn)通過axios來讀取本地json文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
前言
一般前端mock數(shù)據(jù)或者數(shù)據(jù)量過大且不需要考慮安全問題，或者數(shù)據(jù)穩(wěn)定不需要常做變更的場景
這些數(shù)據(jù)可以由前端進行維護，將數(shù)據(jù)轉為json文件放到前端本地進行讀取
本人在項目開發(fā)中，要實現(xiàn)地圖的下鉆功能，將各省市的json下載到了本地靜態(tài)資源包中，結果請求時總是報錯404
前端存放JSON文件的位置
我們的項目是通過vue-cli3創(chuàng)建的
vue-cli3版本腳手架對外暴露的靜態(tài)文件入口是public文件夾(原來是static文件夾)
這里本地json文件也應該放在這里
請求JSON數(shù)據(jù)
直接通過axios請求即可
import axios from './$http'
// 靜態(tài)數(shù)據(jù)
const API = {
// 關于我們 banner 圖
getAboutBanner (url) {
return axios.get('/mock/AboutBanner.json')
}
}
export default API
特別注意
json文件存放在public目錄下，如/public/template/province/jsonData.json
那么在請求json數(shù)據(jù)的時候
地址千萬千萬千萬不能寫/public/template/province/jsonData.json
而是寫/template/province/jsonData.json
否則會報404，因為靜態(tài)資源在打包后，默認public內的文件放在項目根目錄
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue自定義封裝按鈕組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
解決vscode進行vue格式化,會自動補分號和雙引號的問題
這篇文章主要介紹了解決vscode進行vue格式化,會自動補分號和雙引號的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
ElementUI下拉組件el-select一次從后端獲取選項并設置默認值方式
這篇文章主要介紹了ElementUI下拉組件el-select一次從后端獲取選項并設置默認值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
使用vue-router與v-if實現(xiàn)tab切換遇到的問題及解決方法
這篇文章主要介紹了vue-router與v-if實現(xiàn)tab切換的思考,需要的朋友可以參考下2018-09-09
vue 實現(xiàn)axios攔截、頁面跳轉和token 驗證
這篇文章主要介紹了vue 實現(xiàn)axios攔截、頁面跳轉和token 驗證，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義
這篇文章主要為大家詳細介紹了Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要介紹了Vue快速實現(xiàn)通用表單驗證功能，本文通過一個小例子給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
本文主要介紹了Vuex模塊化實現(xiàn)待辦事項的狀態(tài)管理的相關知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了vue2與vue3下如何訪問使用public下的文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
今天在寫vue項目時碰到的問題是怎么修改vue的網頁圖標,所以下面這篇文章主要給大家介紹了關于vue項目中更改名字和圖標的簡單實現(xiàn),文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-08-08