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