Vue3實(shí)現(xiàn)通過axios來讀取本地json文件
前言
一般前端mock數(shù)據(jù)或者數(shù)據(jù)量過大且不需要考慮安全問題，或者數(shù)據(jù)穩(wěn)定不需要常做變更的場(chǎng)景
這些數(shù)據(jù)可以由前端進(jìn)行維護(hù)，將數(shù)據(jù)轉(zhuǎn)為json文件放到前端本地進(jìn)行讀取
本人在項(xiàng)目開發(fā)中，要實(shí)現(xiàn)地圖的下鉆功能，將各省市的json下載到了本地靜態(tài)資源包中，結(jié)果請(qǐng)求時(shí)總是報(bào)錯(cuò)404
前端存放JSON文件的位置
我們的項(xiàng)目是通過vue-cli3創(chuàng)建的
vue-cli3版本腳手架對(duì)外暴露的靜態(tài)文件入口是public文件夾(原來是static文件夾)
這里本地json文件也應(yīng)該放在這里
請(qǐng)求JSON數(shù)據(jù)
直接通過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í)候
地址千萬千萬千萬不能寫/public/template/province/jsonData.json
而是寫/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)文章
這篇文章主要為大家詳細(xì)介紹了vue自定義封裝按鈕組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
解決vscode進(jìn)行vue格式化,會(huì)自動(dòng)補(bǔ)分號(hào)和雙引號(hào)的問題
這篇文章主要介紹了解決vscode進(jìn)行vue格式化,會(huì)自動(dòng)補(bǔ)分號(hào)和雙引號(hào)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
ElementUI下拉組件el-select一次從后端獲取選項(xiàng)并設(shè)置默認(rèn)值方式
這篇文章主要介紹了ElementUI下拉組件el-select一次從后端獲取選項(xiàng)并設(shè)置默認(rèn)值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
使用vue-router與v-if實(shí)現(xiàn)tab切換遇到的問題及解決方法
這篇文章主要介紹了vue-router與v-if實(shí)現(xiàn)tab切換的思考,需要的朋友可以參考下2018-09-09
vue 實(shí)現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗(yàn)證
這篇文章主要介紹了vue 實(shí)現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗(yàn)證，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
Vue快速實(shí)現(xiàn)通用表單驗(yàn)證功能
這篇文章主要介紹了Vue快速實(shí)現(xiàn)通用表單驗(yàn)證功能，本文通過一個(gè)小例子給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理
本文主要介紹了Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了vue2與vue3下如何訪問使用public下的文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue項(xiàng)目中更改名字和圖標(biāo)的簡(jiǎn)單實(shí)現(xiàn)步驟
今天在寫vue項(xiàng)目時(shí)碰到的問題是怎么修改vue的網(wǎng)頁圖標(biāo),所以下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中更改名字和圖標(biāo)的簡(jiǎn)單實(shí)現(xiàn),文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08