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