使用兩種方式調(diào)用本地json文件(基于Vue-cli3腳手架)
使用兩種方式調(diào)用本地json文件
在前端開發(fā)過程中，當(dāng)后臺服務(wù)器開發(fā)數(shù)據(jù)還沒完善，無法與前端進(jìn)行交接時，我們習(xí)慣在本地寫上一個json文件作模擬數(shù)據(jù)測試代碼效果是否有問題。
vue-cli3.0往后的項(xiàng)目基礎(chǔ)架構(gòu)對比舊版本有些區(qū)別。
以前大家都習(xí)慣在根目錄下的static文件夾下創(chuàng)建json文件，然而vuecli3、4沒有static文件夾了。
若創(chuàng)建一個static文件夾在下面存放json文件，在實(shí)際調(diào)用過程中會報(bào)錯，提示請求404。
因此本文將提供兩種方法調(diào)用本地的json文件。
1. 利用Axios請求調(diào)用本地json文件
Vue cli3削減掉static文件夾，取而代之的是在項(xiàng)目根目錄下（與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)成同步進(jì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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue代理報(bào)錯404問題及解決(vue配置proxy)
這篇文章主要介紹了Vue代理報(bào)錯404問題及解決(vue配置proxy)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue項(xiàng)目純前端實(shí)現(xiàn)的模板打印功能示例代碼
在Vue項(xiàng)目中,通過使用vue-print-nb插件,可以實(shí)現(xiàn)頁面的打印功能,這篇文章主要介紹了vue項(xiàng)目純前端實(shí)現(xiàn)的模板打印功能的相關(guān)資料,需要的朋友可以參考下2024-10-10
Element中Upload組件上傳功能實(shí)現(xiàn)(圖片和文件的默認(rèn)上傳及自定義上傳)
這篇文章主要介紹了Element中Upload組件上傳功能實(shí)現(xiàn)包括圖片和文件的默認(rèn)上傳及自定義上傳,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了vue 父組件通過v-model接收子組件的值的代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10
vue2+elementUI實(shí)現(xiàn)下拉樹形多選框效果實(shí)例
這篇文章主要給大家介紹了關(guān)于vue2+elementUI實(shí)現(xiàn)下拉樹形多選框效果的相關(guān)資料,這是最近的工作中遇到的一個需求,對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
vue + vuex todolist的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了vue + vuex todolist的實(shí)現(xiàn)示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue history 模式打包部署在域名的二級目錄的配置指南
這篇文章主要介紹了vue history 模式打包部署在域名的二級目錄的配置指南 ，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue-cli3中vue.config.js配置教程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
使用vue-cli初始化項(xiàng)目時運(yùn)行‘npm run dev’報(bào)錯及解決
這篇文章主要介紹了使用vue-cli初始化項(xiàng)目時運(yùn)行‘npm run dev’報(bào)錯及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
文章介紹了如何使用Vue+Echarts3D實(shí)現(xiàn)地圖效果,并分享了index.vue組件和mapOptions.js的核心方法,希望對大家有所幫助2025-12-12