使用兩種方式調(diào)用本地json文件(基于Vue-cli3腳手架)
使用兩種方式調(diào)用本地json文件
在前端開發(fā)過程中，當后臺服務(wù)器開發(fā)數(shù)據(jù)還沒完善，無法與前端進行交接時，我們習慣在本地寫上一個json文件作模擬數(shù)據(jù)測試代碼效果是否有問題。
vue-cli3.0往后的項目基礎(chǔ)架構(gòu)對比舊版本有些區(qū)別。
以前大家都習慣在根目錄下的static文件夾下創(chuàng)建json文件，然而vuecli3、4沒有static文件夾了。
若創(chuàng)建一個static文件夾在下面存放json文件，在實際調(diào)用過程中會報錯，提示請求404。
因此本文將提供兩種方法調(diào)用本地的json文件。
1. 利用Axios請求調(diào)用本地json文件
Vue cli3削減掉static文件夾，取而代之的是在項目根目錄下（與src同級）生成public文件夾，用于存放靜態(tài)資源，如下圖所示，可以將本地json文件放到public文件夾下。
利用axios的get請求方式，可以調(diào)用上述json文件。
axios.get('/confidence-band.json').then(res => {
console.log(res.data)
})
需注意，axios是異步的，如果轉(zhuǎn)成同步進行，需要在外函數(shù)添加async，axios前加await。
2. import直接調(diào)用（推薦）
上述方式本地json文件必須存放指定位置，同時還要考慮同步異步的問題。
利用import引用，本地json文件無需存放指定位置，以存放assets文件夾下的json文件夾為例。
引用及調(diào)用：
import confidence_band_json from '@/assets/json/confidence-band.json' // 引用 let data = confidence_band_json // 調(diào)用
兩種方式各自有使用場景，若無要求，建議使用第二種方式，調(diào)用更為簡單。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
el-tree的實現(xiàn)葉子節(jié)點單選的示例代碼
本文主要介紹了el-tree的實現(xiàn)葉子節(jié)點單選的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
本文主要介紹了vue3.x頁面功能拆分方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
響應(yīng)式就是當對象本身(對象的增刪值)或者對象屬性(重新賦值)發(fā)生變化時,將會運行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue?proxytable代理根路徑的同時增加其他代理方式
這篇文章主要介紹了vue?proxytable代理根路徑的同時增加其他代理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了Vue實現(xiàn)京東網(wǎng)站商品放大鏡效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
詳解vue-cli本地環(huán)境API代理設(shè)置和解決跨域
這篇文章主要介紹了詳解vue-cli本地環(huán)境API代理設(shè)置和解決跨域，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了Vue中獲取this.$refs為undefined的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue+element-ui動態(tài)生成多級表頭的方法
今天小編就為大家分享一篇vue+element-ui動態(tài)生成多級表頭的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue組件間通信全面講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了vue使用swiper.js重疊輪播組建樣式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11