快捷導(dǎo)航

詳解vue配置請(qǐng)求多個(gè)服務(wù)端解決方案

更新時(shí)間：2021年03月30日 11:26:07 作者：王、先生

這篇文章主要介紹了詳解vue配置請(qǐng)求多個(gè)服務(wù)端解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、解決方案

1.1 描述接口context-path

后端的兩個(gè)接口服務(wù)請(qǐng)求前綴，如下：

前綴1: /bryant
前綴2: /

1.2 vue.config.js配置

devServer: {
 port: 8005,
 proxy: {
  // 第一臺(tái)服務(wù)器配置 
  '/bryant': {
   target: 'http://localhost:8081,
   ws: true,
   changeOrigin: true,
   pathRewrite: {
    '^/bryant': '/bryant'
   }
  },
  // 第二臺(tái)服務(wù)器配置 
  '/': {
   target: 'http://localhost:8082',
   ws: true,
   changeOrigin: true,
   pathRewrite: {
    '^/': '/'
   }
  } 
 }
}

1.3 axios修改

// api base_url，設(shè)置前綴不存在
const BASE_URL = ''
// 創(chuàng)建 axios 實(shí)例
const service = axios.create({
 baseURL: BASE_URL, 
 timeout: 6000 // 請(qǐng)求超時(shí)時(shí)間
})

此時(shí)axios不需要直接指定baseUrl配置

1.4 發(fā)送請(qǐng)求

// 請(qǐng)求前綴為“/”
this.$http.get("/basketball").then(res => {
 console.log('/', res)
}).catch(err => {
 console.log(err)
})
// 請(qǐng)求前綴為“bryant”
this.$http.get("/bryant/mvp").then(res => {
 console.log('/bryant', res)
}).catch(err => {
 console.log(err)
})

總結(jié)

多個(gè)接口服務(wù)的情況下，如果前綴是"/"，要將其放在proxy配置的最后一部分，代理的時(shí)候是從上往下查找的，如果放在最上面其他服務(wù)也會(huì)被該配置代理掉

到此這篇關(guān)于詳解vue配置請(qǐng)求多個(gè)服務(wù)端解決方案的文章就介紹到這了,更多相關(guān)vue配置請(qǐng)求多個(gè)服務(wù)端內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue?Echarts實(shí)現(xiàn)多功能圖表繪制的示例詳解
作為前端人員，日常圖表、報(bào)表、地圖的接觸可謂相當(dāng)頻繁，今天小編隆重退出前端框架之VUE結(jié)合百度echart實(shí)現(xiàn)中國(guó)地圖+各種圖表的展示與使用；作為“你值得擁有”專欄階段性末篇，值得一看
2023-02-02
Vue項(xiàng)目中引入 ECharts
這篇文章主要介紹了Vue項(xiàng)目中引入 ECharts，ECharts是一個(gè)強(qiáng)大的畫圖插件，在vue項(xiàng)目中，我們常?？梢砸肊charts來(lái)完成完成一些圖表的繪制；以下介紹vue項(xiàng)目中引用并使用ECharts，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2021-12-12
VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表（1）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-06-06
vue+elementUI組件table實(shí)現(xiàn)前端分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI組件table實(shí)現(xiàn)前端分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳
本文主要介紹了vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-07-07
Vue3 響應(yīng)式偵聽與計(jì)算的實(shí)現(xiàn)
這篇文章主要介紹了Vue3 響應(yīng)式偵聽與計(jì)算的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
vue3?騰訊地圖設(shè)置簽到范圍并獲取經(jīng)緯度的實(shí)現(xiàn)代碼
本文給大家介紹vue3?騰訊地圖設(shè)置簽到范圍并獲取經(jīng)緯度的實(shí)現(xiàn)代碼，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧
2022-05-05
vue監(jiān)聽路由變化時(shí)watch方法會(huì)執(zhí)行多次的原因及解決
這篇文章主要介紹了vue監(jiān)聽路由變化時(shí)watch方法會(huì)執(zhí)行多次的原因及解決，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-04-04
自定義Vue組件打包、發(fā)布到npm及使用教程
這篇文章主要介紹了自定義Vue組件打包、發(fā)布到npm及使用教程 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-05-05
前端vue如何使用高德地圖
這篇文章主要介紹了前端vue如何使用高德地圖，幫助大家利用vue調(diào)用其他key，完成需求，感興趣的朋友可以了解下
2020-11-11