vue cli3讀取本地json檔案

2021-10-07 15:23:23 字數 1195 閱讀 8699

一般前端mock資料或者資料量過大且不需要考慮安全問題,或者資料穩定不需要常做變更的場景,這些資料可以由前端進行維護,將資料轉為json檔案放到前端本地進行讀取。

由於公司業務,需要在進入頁面的時候,一次獲取15萬條資料用於輸入框的模糊搜尋,但是這樣前端一次性獲取如此大量的資料,直接就導致了頁面崩潰,載入奇慢。

這麼大量且不需要時常做變更的資料,除了放到後端,通過分頁的辦法進行請求,還可以採用將資料轉為json檔案,存到前端的本地專案裡,由前端進行維護。

我們的專案是通過vue-cli3建立的,vue-cli3版本腳手架對外暴露的靜態檔案入口是public資料夾(原來是static資料夾),這裡本地json檔案也應該放在這裡

// 請求攔截

service.interceptors.request.use(

(config)

=>

, (error: any)

=>,)

;// 響應攔截

service.interceptors.response.use(

(response: any)

=>

, (error: any)

=>,)

;export default service

;特別注意:json檔案存放在public目錄下,如/public/data/jsondata.json,那麼在請求json資料的時候,位址千萬千萬千萬不能寫/public/data/jsondata.json,而是寫/data/jsondata.json,否則會報404,因為靜態資源在打包後,預設public內的檔案放在專案根目錄,

import

$axiosjson from '@/utils/axiosjson'

; // 引入封裝的axios例項

// 獲取本地json資料

export const getjsondataapi =()

=>);

};

文章參考:

vue cli3的打包並在本地檢視

1.vue cli3沒有vue.config.js檔案,在根目錄下建乙個vue.config.js檔案 3.vue cli3.3版本前的打包命令 vue cli3.3版本之後 我用3.3之前的命令打包一直報這種錯誤 後來用3.3版本之後那種命令打包成功 4.打包完成後的注意事項 打包後我們可以看到d...

vue cli3 使用手機訪問本地專案

這裡只寫一下怎麼使用手機訪問vue的本地專案,多的我就不贅述了 第一步win r 開啟cmd 輸入 ipconfig 檢視一下本機網路ip,如下圖 可以看到本機的ip是 192.168.1.107 第二步 開啟 vue.config.js這個檔案,新增devserver這個物件 部分配置引數如下 配...

vue cli 3學習要點

只整理了一下vue cli 3的基礎內容部分,其他的見官網 一 簡介vue3 1.它可以通過 vue create 快速建立乙個新專案的腳手架,或者直接通過 vue serve 構建新想法的原型,不需要vue2.0那樣用webpack來構建專案 2.在專案建立的過程中,你也會被提示選擇喜歡的包管理器...