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