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)生跨域的報錯，導(dǎo)致數(shù)據(jù)無法顯示

報錯問題的圖示

谷歌里面會出先 is been blocked CORS；

這里設(shè)計的就是瀏覽器設(shè)置的同源策略，也是基于安全考慮的，但是吧，就是對于本地開發(fā)來說確實比較麻煩。至于什么是同源策略，這里就不贅述了，這里主要以解決問題為主。

這邊的系統(tǒng)，設(shè)備，和編輯器

windows10系統(tǒng)、編輯器 sublime

首先把項目引入到sublime中

第一步 Ctrl+Shift+P打開命令面板，輸入Package Control: Install Package
第二步輸入 SublimeServer并且選中
第三步安裝完成過后通過Tool選項 → SublimeServer → Start SublimeServer
第四步通過Tool選項 → SublimeServer → Start SublimeServer -> Settings

主要是注意下面的端口，不要和其他項目的端口沖突即可。

在你需要訪問的index.html里面右擊鼠標(biāo)，出現(xiàn) View in SublimeServer，就會自動到瀏覽器的

瀏覽器地址會變成 http://localhost:8088/project/index.html 這樣就會繞過同源策略的報錯了，因為每個用于Web開發(fā)的IDE都內(nèi)置http服務(wù)器，不用單獨配置。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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