vue使用axios訪問本地json文件404問題及解決
更新時間：2024年07月26日 15:08:50 作者：雙非地信Jun
這篇文章主要介紹了vue使用axios訪問本地json文件404問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue使用axios訪問本地json文件404
錯誤：
最近在做vue項目時，要使用到本地json數(shù)據(jù)，由于第一次使用，于是隨便用axios請求了一下，結果報錯了，如下圖。
很明顯，一般我們遇到404報錯，都很清楚是路徑錯了。服務器在你寫的路徑上找不到對應的資源。
來回瀏覽了半天，發(fā)現(xiàn)是自己基礎的問題。
知識：
我們在存放json文件時，需要放到vue中與src同級的文件夾中
一般我們在src同級文件夾創(chuàng)建一個static文件夾存放我們的靜態(tài)數(shù)據(jù)，就如我們的data.json數(shù)據(jù)
結果：
在我按照上述方法做了之后，如下圖。
這樣就報錯就消失了。成功的得到了數(shù)據(jù)。
vue2使用axios請求本地json文件，get報錯404
網(wǎng)上其他的解決辦法也有，此處分享一下我的問題解決辦法，估計很多人也是需要這樣解決。
我的json文件路徑
這里我建了一個static文件夾，是因為網(wǎng)上找答案的時候搞上去的，刪掉也沒關系，直接放在public文件夾下。
下圖是錯誤的路徑，對于public靜態(tài)資源中的文件直接獲取即可，不需要再加public，可以理解為斜杠就代表了public。
正確路徑如下
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
最近入職了新公司,接手了一個新拆分出來的Vue項目,針對該項目做了個打包優(yōu)化,下面這篇文章主要給大家介紹了關于Vue項目中打包優(yōu)化的四種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue v-text指令簡單使用方法,結合實例形式分析了v-text指令文本輸出顯示簡單操作技巧,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)圖片驗證碼生成，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了Vue如何實現(xiàn)實時監(jiān)聽頁面寬度高度變化,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細介紹了vue使用echarts圖表的詳細方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要幫助大家簡單的理解vue中Props屬性，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
利用Vue.js框架實現(xiàn)火車票查詢系統(tǒng)（附源碼）
這篇文章主要介紹了利用Vue.js框架實現(xiàn)火車票查詢系統(tǒng)的相關資料,，文中給出了詳細的介紹與示例代碼，并在文章結尾給出了完整的項目下載，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
在vue中使用express-mock搭建mock服務的方法
這篇文章主要介紹了在vue中使用express-mock搭建mock服務的方法，文中給大家提到了在vue-test-utils 中 mock 全局對象的相關知識 ,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue中$router和$route的區(qū)別，對vue感興趣的同學，一定要看下2021-05-05