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';
調(diào)用
test().then((res) => {
console.log(res)
})vue訪問本地json文件的那些事兒
VUE訪問本地json文件，會產(chǎn)生跨域的報錯，導致數(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都內(nèi)置http服務器，不用單獨配置。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue2和vue3的組件封裝還是有區(qū)別,下面這篇文章主要給大家介紹了關于Vue3如何封裝組件的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考學習價值,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue同個按鈕控制展開和折疊同個事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
集成vue-cli腳手架里面的二維碼插件貌似很多，一般都會滿足大部分需求，這次就講一下插件vue-qriously生成二維碼效果，感興趣的朋友一起看看吧2022-04-04
這篇文章主要介紹了vue深復制的相關資料，非常不錯，具有參考借鑒價值，需要的朋友參考下2018-01-01
watch和computed都是以Vue的依賴追蹤機制為基礎的,當某一個依賴型數(shù)據(jù)發(fā)生變化的時候,所有依賴這個數(shù)據(jù)的相關數(shù)據(jù)會自動發(fā)生變化,即自動調(diào)用相關的函數(shù),來實現(xiàn)數(shù)據(jù)的變動，這篇文章簡單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧2023-02-02
這篇文章主要給大家介紹了關于vue中常見的問題及解決方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
在Vue中,實現(xiàn)圖片或組件的平鋪布局并允許用戶進行修改,可以通過數(shù)據(jù)綁定、模板編寫與交互設計來實現(xiàn)圖片平鋪,使用v-for指令和動態(tài)組件,可以創(chuàng)建可編輯的組件平鋪布局,允許用戶通過點擊觸發(fā)編輯操作,通過外部編輯面板修改屬性后保存更改2024-10-10
這篇文章主要為大家詳細介紹了Vue2.0+SVG實現(xiàn)音樂播放圓形進度條組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了詳解vue-cli@2.x項目遷移日志，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
最近有個需求是前端在瀏覽器顯示攝像頭傳回的RTSP視頻流,下面這篇文章主要給大家介紹了關于vue中播放rtsp流的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12