vue配置多代理服務(wù)接口地址操作
一、介紹
隨著微服務(wù)架構(gòu)的流行，后臺(tái)項(xiàng)目逐漸被拆分成不同的模塊進(jìn)行通信，但是前端還是只有一個(gè)項(xiàng)目所以在訪問(wèn)不同模塊后臺(tái)時(shí)，需要請(qǐng)求不同的地址，在vue項(xiàng)目中，通過(guò)配置代理可以進(jìn)行后端服務(wù)器接口地址訪問(wèn)，當(dāng)需要訪問(wèn)不同微服務(wù)的后端接口時(shí)就需要配置不同的地址。
二、代碼
config/index.js文件中配置代理地址：
自己項(xiàng)目中定義所有接口api管理文件src/api/getData.js：
頁(yè)面調(diào)用接口時(shí)xxx.vue
三、總結(jié)
1、vue使用配置多代理地址方式可以訪問(wèn)不同的項(xiàng)目地址，使用以上方法。
2、同時(shí)也是可以把所有接口通過(guò)一個(gè)統(tǒng)一的后臺(tái)項(xiàng)目通過(guò)feign調(diào)用其他系統(tǒng)接口進(jìn)行訪問(wèn)，使用該種方式只需要配置一個(gè)代理地址即可，同時(shí)也可以對(duì)所有接口調(diào)用進(jìn)行監(jiān)控，比如添加用戶操作記錄時(shí)就比較簡(jiǎn)單，只需要定義一個(gè)aop切面監(jiān)控conroller中的方法即可。
補(bǔ)充知識(shí)：Vue解決跨域多個(gè)target問(wèn)題（配置多個(gè)代理問(wèn)題）
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
devServer: {
publicPath: process.env.NODE_ENV === 'production'? '/production-sub-path/': '/',
proxy: {
//可以配置多個(gè)代理
'/api': {
target: 'http://192.168.0.201:9994',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
},
'/images': {
target: 'http://baidu.com',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/images': ''
}
}
}
},
以上這篇vue配置多代理服務(wù)接口地址操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)完整代碼
作為一個(gè)AI模型,人臉識(shí)別涉及到多個(gè)技術(shù)領(lǐng)域,下面這篇文章主要給大家介紹了關(guān)于vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue內(nèi)置組件Transition的詳解,簡(jiǎn)單地說(shuō)，就是當(dāng)元素發(fā)生變化，比如消失、顯示時(shí)，添加動(dòng)畫(huà)讓它更自然過(guò)渡，它是vue內(nèi)置組件，不需要引入注冊(cè)就可以直接使用，本文通過(guò)實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-09-09
使用vue-aplayer插件時(shí)出現(xiàn)的問(wèn)題的解決
這篇文章主要介紹了使用vue-aplayer插件時(shí)出現(xiàn)的問(wèn)題的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue-cli中的babel配置文件.babelrc實(shí)例詳解
Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。本文介紹vue-cli腳手架工具根目錄的babelrc配置文件，感興趣的朋友一起看看吧2018-02-02
Ant?Design-vue?解決input前后空格問(wèn)題(推薦)
最近做項(xiàng)目遇到這樣一個(gè)問(wèn)題輸入框不允許有前后空格但字符中間可以有空格，怎么解決這個(gè)問(wèn)題呢，接下來(lái)小編把a(bǔ)nt?Design-vue?解決input前后空格問(wèn)題的實(shí)現(xiàn)代碼分享給大家，感興趣的朋友一起看看吧2022-10-10
vue3?TS?vite?element?ali-oss使用教程示例
這篇文章主要為大家介紹了vue3?TS?vite?element?ali-oss使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)電子時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章介紹了Vue.js中v-model指令的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法
今天小編就為大家分享一篇vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09