vue配置多代理服務(wù)接口地址操作
一、介紹
隨著微服務(wù)架構(gòu)的流行，后臺(tái)項(xiàng)目逐漸被拆分成不同的模塊進(jìn)行通信，但是前端還是只有一個(gè)項(xiàng)目所以在訪問不同模塊后臺(tái)時(shí)，需要請(qǐng)求不同的地址，在vue項(xiàng)目中，通過配置代理可以進(jìn)行后端服務(wù)器接口地址訪問，當(dāng)需要訪問不同微服務(wù)的后端接口時(shí)就需要配置不同的地址。
二、代碼
config/index.js文件中配置代理地址：
自己項(xiàng)目中定義所有接口api管理文件src/api/getData.js：
頁面調(diào)用接口時(shí)xxx.vue
三、總結(jié)
1、vue使用配置多代理地址方式可以訪問不同的項(xiàng)目地址，使用以上方法。
2、同時(shí)也是可以把所有接口通過一個(gè)統(tǒng)一的后臺(tái)項(xiàng)目通過feign調(diào)用其他系統(tǒng)接口進(jìn)行訪問，使用該種方式只需要配置一個(gè)代理地址即可，同時(shí)也可以對(duì)所有接口調(diào)用進(jìn)行監(jiān)控，比如添加用戶操作記錄時(shí)就比較簡單，只需要定義一個(gè)aop切面監(jiān)控conroller中的方法即可。
補(bǔ)充知識(shí)：Vue解決跨域多個(gè)target問題（配置多個(gè)代理問題）
我就廢話不多說了，大家還是直接看代碼吧~
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ù)接口地址操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue引用vee-validate插件表單驗(yàn)證問題(cdn方式引用)
這篇文章主要介紹了Vue引用vee-validate插件表單驗(yàn)證問題(cdn方式引用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue+element模態(tài)框中新增模態(tài)框和刪除功能
這篇文章主要介紹了vue+element模態(tài)框中新增模態(tài)框和刪除功能,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
本篇文章主要介紹了詳解vue2路由vue-router配置（懶加載），實(shí)例分析了vue-router懶加載的技巧，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-04-04
這篇文章主要介紹了詳解vue-cli 2.0配置文件(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
Vue實(shí)現(xiàn)導(dǎo)航欄點(diǎn)擊當(dāng)前標(biāo)簽變色功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)導(dǎo)航欄點(diǎn)擊當(dāng)前標(biāo)簽變色功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
前端JS也可以連點(diǎn)成線詳解(Vue中運(yùn)用AntVG6)
這篇文章主要給大家介紹了關(guān)于前端JS連點(diǎn)成線(Vue中運(yùn)用?AntVG6)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-01-01
今天小編就為大家分享一篇vue自定義正在加載動(dòng)畫的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue實(shí)現(xiàn)動(dòng)態(tài)顯示表單項(xiàng)填寫進(jìn)度功能
這篇文章主要介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)顯示表單項(xiàng)填寫進(jìn)度功能，此功能可以幫助用戶了解表單填寫的進(jìn)度和當(dāng)前狀態(tài)，提高用戶體驗(yàn)，通常實(shí)現(xiàn)的方式是在表單中添加進(jìn)度條，根據(jù)用戶填寫狀態(tài)動(dòng)態(tài)更新進(jìn)度條，感興趣的同學(xué)可以參考下文2023-05-05
vue+element-ui中form輸入框無法輸入問題的解決方法
很多初次接觸element-ui的同學(xué),在用到element form組件時(shí)可能會(huì)遇到input框無法輸入文字的問題,下面這篇文章主要給大家介紹了關(guān)于vue+element-ui中form輸入框無法輸入問題的解決方法,需要的朋友可以參考下2023-04-04
Vue項(xiàng)目中CSS?Modules和Scoped?CSS的介紹與區(qū)別
在vue中我們有兩種方式可以定義css作用域,一種是scoped,另一種就是css modules,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中CSS?Modules和Scoped?CSS的相關(guān)資料,需要的朋友可以參考下2022-03-03