vue:axios請求本地json路徑錯誤問題及解決
更新時間：2022年06月05日 14:07:57 作者：大佬，咋整啊
這篇文章主要介紹了vue:axios請求本地json路徑錯誤問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
axios請求本地json路徑錯誤
本例用的是vuecli4，json等靜態(tài)資源存放在public文件夾中
返回404
this.axios.get('public/redeme.json').then((res) => {
console.log(res.data)
})其實vue從代碼到界面展示還要經過編譯，所以路徑會有所改變
實際路徑可以先打包一下，我是這么找到json的路徑的
打包后的文件目錄如下
所以我把路徑改成：
this.axios.get('./redeme.json').then((res) => {
console.log(res.data)
})獲取成功：
axios的基礎路徑如何設置
在不通過接口文件的情況下，如何使用axios呢？
在組件中調用axios，沒必要一定在接口文件中設置，你可以選擇在入口文件中設置基礎訪問路徑，在組件中通過this.axios這個方法發(fā)送異步請求即可。
舉個栗子吧↓
項目要求：所有api的域名為：http://www.escook.cn:3000 如果后面文檔中，有的域名地址和這里不一樣，以這里的為主；
請求接口：/api/getnewslist
請求方式：get
具體代碼如下：
步驟一：入口文件：main.js
import axios from 'axios'; axios.defaults.baseURL='http://www.escook.cn:3000 ' Vue.prototype.axios=axios
步驟二：組件：newList.vue
created () {
this.axios.get('/api/getnewslist').then(res=>{
console.log(res)
this.newList=res.data.message
})
}注意：this指代vue，要在axios前加上this
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue使用js-audio-recorder實現(xiàn)錄制,播放與下載音頻功能
這篇文章主要為大家詳細介紹了Vue如何使用js-audio-recorder實現(xiàn)錄制,播放與下載音頻功能,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2023-12-12
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue3 獲取元素高度不準的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3(ts)類型EventTarget上不存在屬性value的問題
這篇文章主要介紹了vue3(ts)類型EventTarget上不存在屬性value的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
應公司需求,接口需要對接vue,記錄一下碰到的問題,下面這篇文章主要給大家介紹了關于Vue項目中接口調用的詳細講解,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
watch(監(jiān)視屬性)和computed(計算屬性)的區(qū)別及實現(xiàn)案例
watch和computed是vue實例對象中的兩個重要屬性，watch是監(jiān)視屬性，用來監(jiān)視vue實例對象上屬性和方法的變化，computed被稱為計算屬性，可以將data對象中的屬性進行計算得到新的屬性，這篇文章主要介紹了watch(監(jiān)視屬性)和computed(計算屬性)的區(qū)別,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了使用vue實現(xiàn)各類彈出框組件,文中給大家提到了vue中常用的dialog組件的封裝，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
使用Vue-scroller頁面input框不能觸發(fā)滑動的問題及解決方法
這篇文章主要介紹了使用Vue-scroller頁面input框不能觸發(fā)滑動的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
我們知道使用webpack打包vue項目后會生成一個dist文件夾,dist文件夾下有html文件和其他css、js以及圖片等,那么打包后的文件該如何正確運行呢?這篇文章主要給大家介紹了關于vue打包之后的dist文件如何運行的相關資料,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了vue.js模擬日歷插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09