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