vue使用axios訪問(wèn)本地json文件404問(wèn)題及解決
vue使用axios訪問(wèn)本地json文件404
錯(cuò)誤：
最近在做vue項(xiàng)目時(shí)，要使用到本地json數(shù)據(jù)，由于第一次使用，于是隨便用axios請(qǐng)求了一下，結(jié)果報(bào)錯(cuò)了，如下圖。
很明顯，一般我們遇到404報(bào)錯(cuò)，都很清楚是路徑錯(cuò)了。服務(wù)器在你寫(xiě)的路徑上找不到對(duì)應(yīng)的資源。
來(lái)回瀏覽了半天，發(fā)現(xiàn)是自己基礎(chǔ)的問(wèn)題。
知識(shí)：
我們?cè)诖娣舑son文件時(shí)，需要放到vue中與src同級(jí)的文件夾中
一般我們?cè)趕rc同級(jí)文件夾創(chuàng)建一個(gè)static文件夾存放我們的靜態(tài)數(shù)據(jù)，就如我們的data.json數(shù)據(jù)
結(jié)果：
在我按照上述方法做了之后，如下圖。
這樣就報(bào)錯(cuò)就消失了。成功的得到了數(shù)據(jù)。
vue2使用axios請(qǐng)求本地json文件，get報(bào)錯(cuò)404
網(wǎng)上其他的解決辦法也有，此處分享一下我的問(wèn)題解決辦法，估計(jì)很多人也是需要這樣解決。
我的json文件路徑
這里我建了一個(gè)static文件夾，是因?yàn)榫W(wǎng)上找答案的時(shí)候搞上去的，刪掉也沒(méi)關(guān)系，直接放在public文件夾下。
下圖是錯(cuò)誤的路徑，對(duì)于public靜態(tài)資源中的文件直接獲取即可，不需要再加public，可以理解為斜杠就代表了public。
正確路徑如下
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue 3.0 中 jsx 語(yǔ)法使用，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
vue+elementui實(shí)現(xiàn)動(dòng)態(tài)添加行/可編輯的table
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)動(dòng)態(tài)添加行/可編輯的table，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue項(xiàng)目實(shí)現(xiàn)多語(yǔ)言切換的思路
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)多語(yǔ)言切換的思路，幫助大家完成多語(yǔ)言翻譯，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了vue子父組件通信的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-07-07
解決vue 打包發(fā)布去#和頁(yè)面空白的問(wèn)題
今天小編就為大家分享一篇解決vue 打包發(fā)布去#和頁(yè)面空白的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue3+Vite實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)實(shí)例代碼
我們?cè)陂_(kāi)發(fā)大型系統(tǒng)的時(shí)候一般都需要?jiǎng)討B(tài)添加路由,下面這篇文章主要給大家介紹了關(guān)于Vue3+Vite實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)資料,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue項(xiàng)目中使用lib-flexible解決移動(dòng)端適配的問(wèn)題解決
這篇文章主要介紹了vue項(xiàng)目中使用lib-flexible解決移動(dòng)端適配的問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
在vue3版本中，引入了一個(gè)新的函數(shù)，叫做setup，引入他的原因總結(jié)一下主要原因是：為了使用組合式 API，setup函數(shù)是Composition 的入口。本文將詳細(xì)介紹一下Vue3中setup函數(shù)的使用教程，感興趣的可以了解一下2022-07-07
這篇文章主要介紹了vue動(dòng)態(tài)路由配置，vue路由傳參的方式，文中給大家提到了router-link這個(gè)組件的相關(guān)知識(shí),需要的朋友可以參考下2018-05-05
vue3+ts+EsLint+Prettier規(guī)范代碼的方法實(shí)現(xiàn)
本文主要介紹在Vue3中使用TypeScript做開(kāi)發(fā)時(shí)，如何安裝與配置EsLint和Prettier，以提高編碼規(guī)范。感興趣的可以了解一下2021-10-10