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