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ù)轉(zhuǎn)為json文件放到前端本地進行讀取
本人在項目開發(fā)中，要實現(xiàn)地圖的下鉆功能，將各省市的json下載到了本地靜態(tài)資源包中，結(jié)果請求時總是報錯404
前端存放JSON文件的位置
我們的項目是通過vue-cli3創(chuàng)建的
vue-cli3版本腳手架對外暴露的靜態(tài)文件入口是public文件夾(原來是static文件夾)
這里本地json文件也應(yīng)該放在這里
請求JSON數(shù)據(jù)
直接通過axios請求即可
import axios from './$http'
// 靜態(tài)數(shù)據(jù)
const API = {
// 關(guān)于我們 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內(nèi)的文件放在項目根目錄
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue.use()的作用及原理解析，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
下面小編就為大家分享一篇Vue父組件調(diào)用子組件事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本文主要介紹了在VueRouter中,meta對象的使用和配置方式,meta對象可以包含任何你希望附加到路由的自定義信息,這些配置信息可以靈活的滿足你的應(yīng)用需求,使得路由配置更具靈活性和可擴展性2024-10-10
Vue 最獨特的特性之一，是非侵入式的響應(yīng)系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。本文將通過示例詳解Vue的響應(yīng)式原理，感興趣的可以了解一下2022-03-03
vue、react等單頁面項目應(yīng)該這樣子部署到服務(wù)器
這篇文章主要介紹了vue、react等單頁面項目應(yīng)該這樣子部署到服務(wù)器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast)
這篇文章主要介紹了詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了Vite的原理，Vite是一個更輕、更快的web應(yīng)用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項目是一個普通的Vue3應(yīng)用，相比基于Vue-cli創(chuàng)建的應(yīng)用少了很多配置文件和依賴，下面基于Vite相關(guān)資料內(nèi)容，需要的朋友可以參考一下2022-02-02
這篇文章主要介紹了淺談Vue知識系列-axios，本文章內(nèi)容詳細，具有很好的參考價值，希望對大家有所幫助，需要的朋友可以參考下<BR>2023-01-01
最近項目開發(fā)中遇到一個需求,需要實現(xiàn)寬度自動適應(yīng),所以下面這篇文章主要給大家介紹了關(guān)于Vue前端項目自適應(yīng)布局的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
Vue配置marked鏈接添加target="_blank"的方法
這篇文章主要介紹了Vue配置marked鏈接添加target="_blank"的方法，文中給大家提到了vue實現(xiàn)類似target="_blank"打開新窗口的代碼,感興趣的朋友參考下吧2019-07-07