vue項目中訪問本地json數(shù)據(jù)
更新時間：2024年07月26日 14:48:12 作者：小潔的博客
這篇文章主要介紹了vue項目中訪問本地json數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue訪問本地json數(shù)據(jù)
如果你的項目中需要模擬下json數(shù)據(jù)，來看下訪問速度，那就參照這個試試吧，首先創(chuàng)建test.josn，放在pulic目錄下
見下圖：
定義js
// 文件 prodOrder.js
export function test(data) {
return request({
url: 'http://localhost:8080/../test.json',
method: 'get',
data
});
}
頁面引用
import {
test
} from '@/api/produce/prodOrder';
調用
test().then((res) => {
console.log(res)
})vue訪問本地json文件的那些事兒
VUE訪問本地json文件，會產生跨域的報錯，導致數(shù)據(jù)無法顯示
報錯問題的圖示
谷歌里面會出先 is been blocked CORS；
這里設計的就是瀏覽器設置的同源策略，也是基于安全考慮的，但是吧，就是對于本地開發(fā)來說確實比較麻煩。至于什么是同源策略，這里就不贅述了，這里主要以解決問題為主。
這邊的系統(tǒng)，設備，和編輯器
windows10系統(tǒng)、編輯器 sublime
首先把項目引入到sublime中
- 第一步 Ctrl+Shift+P打開命令面板，輸入Package Control: Install Package
- 第二步 輸入 SublimeServer并且選中
- 第三步 安裝完成過后通過Tool選項 → SublimeServer → Start SublimeServer
- 第四步 通過Tool選項 → SublimeServer → Start SublimeServer -> Settings
主要是注意下面的端口，不要和其他項目的端口沖突即可。
在你需要訪問的index.html里面右擊鼠標，出現(xiàn) View in SublimeServer，就會自動到瀏覽器的
瀏覽器地址會變成 http://localhost:8088/project/index.html 這樣就會繞過同源策略的報錯了，因為每個用于Web開發(fā)的IDE都內置http服務器，不用單獨配置。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue Element前端應用開發(fā)之echarts圖表
在我們做應用系統(tǒng)的時候，往往都會涉及圖表的展示，綜合的圖表展示能夠給客戶帶來視覺的享受和數(shù)據(jù)直觀體驗，同時也是增強客戶認同感的舉措之一2021-05-05
這篇文章主要介紹了如何使用Vue和ElementPlus構建前端頁面,特別是如何進行跨域請求和使用Vue?Router進行路由管理,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
Vue3+Element-Plus使用Table預覽圖片發(fā)生元素遮擋的解決方法
這篇文章主要介紹了Vue3+Element-Plus使用Table預覽圖片發(fā)生元素遮擋的問題分析和解決方法,文中通過代碼示例講解的非常詳細,對大家解決問題有一定的幫助,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細介紹了Vue實現(xiàn)拖拽改變列表順序的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04
vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue vite之LogicFlow安裝核心依賴及項目初始化詳解
這篇文章主要為大家介紹了vue vite之LogicFlow安裝核心依賴及項目初始化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家詳細介紹了Vue如何使用openlayers加載天地圖,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2024-02-02
這篇文章主要介紹了Vue設置keepAlive不生效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)通訊錄功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當前時間實時定位功能
這篇文章主要介紹了基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當前時間實時定位功能,開始時間、結束時間可配置，根據(jù)當前時間初始化位置，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05