使用vue項(xiàng)目配置多個代理的注意點(diǎn)
在Vue項(xiàng)目的開發(fā)過程中,為了本地調(diào)試方便，我們通常會在 vue.config.js 中配置 devServer 來在本地啟動一個服務(wù)器，在這個選項(xiàng)中，我們會配置proxy 屬性來將指向到本地的請求（例如： /api/action） 代理到后端的開發(fā)服務(wù)器上（例如： http://xxx.xxx.xxx/api/action）
devServer: {
port: 8081,
proxy: {
'/api/action': {
target: 'http://192.168.200.106:81',
changeOrigin: true,
ws: true,
secure: false
}
}
},
```
在這個配置中，要注意以下兩點(diǎn)：
接口地址有重疊地址時(shí)，將匹配度低的放在后面。
例如：
- * 將 / 匹配到 192.191.1.1;
- * 將 /api 匹配到 192.191.1.2
- * 將 /api/action 匹配到 192.191.1.3
如果我們像下面一樣書寫：
proxy: {
'/': {
target: 'http://192.191.1.1',
changeOrigin: true,
ws: true,
secure: false
},
'/api': {
target: 'http://192.191.1.2',
changeOrigin: true,
ws: true,
secure: false
},
'/api/action': {
target: 'http://192.191.1.3',
changeOrigin: true,
ws: true,
secure: false
}
}
那么所有到/, /api和 /api/action 的請求將全部被代理到 192.191.1.1 上面去
原因是這里的匹配實(shí)際上是一個正則匹配的過程，當(dāng)我們請求 /api 時(shí)，首先讀取到了配置項(xiàng)中的第一個，拿配置中的 / 去匹配請求中的 /api ， 發(fā)現(xiàn)請求的/api 中包含配置項(xiàng)/, 匹配成功，直接將請求代理到了 192.191.1.1 上面去， 對/api/action的匹配也同理。
也就是說，它的匹配規(guī)則是： 拿配置項(xiàng)中的地址去匹配請求中的地址，如果請求中的地址中包含配置中的地址，則匹配成功，否則，拿下一個配置項(xiàng)繼續(xù)匹配。
所以，配置中的地址與請求地址中匹配的字符越少，匹配度越低。 上例中配置中的地址（/）與請求地址（/api）只有一個字符是匹配的，所以匹配度低。
所以我們正確的寫法應(yīng)該是：
proxy: {
'/api/action': {
target: 'http://192.191.1.3',
changeOrigin: true,
ws: true,
secure: false
},
'/api': {
target: 'http://192.191.1.2',
changeOrigin: true,
ws: true,
secure: false
},
'/': {
target: 'http://192.191.1.1',
changeOrigin: true,
ws: true,
secure: false
}
}
這樣到三個地址的請求就都可以正確代理到相應(yīng)的地址去了
多個地址代理同一個target 時(shí)，可進(jìn)行合并
在實(shí)際應(yīng)用中，由于后端采用微服務(wù)模式開發(fā)，在開發(fā)階段，我們可能會將不同的服務(wù)代理到不同的地址上，當(dāng)服務(wù)很多時(shí)，我們代理的數(shù)量也就很多：
proxy: {
'/api/action': {
target: 'http://192.191.1.3',
changeOrigin: true,
ws: true,
secure: false
},
'/api/action2': {
target: 'http://192.191.1.4',
changeOrigin: true,
ws: true,
secure: false
},
'/api/action3': {
target: 'http://192.191.1.3',
changeOrigin: true,
ws: true,
secure: false
},
'/api/action4': {
target: 'http://192.191.1.4',
changeOrigin: true,
ws: true,
secure: false
},
'/api/action5': {
target: 'http://192.191.1.5',
changeOrigin: true,
ws: true,
secure: false
},
'/api/action6': {
target: 'http://192.191.1.6',
changeOrigin: true,
ws: true,
secure: false
},
'/api/action7': {
target: 'http://192.191.1.5',
changeOrigin: true,
ws: true,
secure: false
},
'/api/action8': {
target: 'http://192.191.1.6',
changeOrigin: true,
ws: true,
secure: false
},
'/api/action9': {
target: 'http://192.191.1.7',
changeOrigin: true,
ws: true,
secure: false
},
'/api': {
target: 'http://192.191.1.2',
changeOrigin: true,
ws: true,
secure: false
},
'/': {
target: 'http://192.191.1.1',
changeOrigin: true,
ws: true,
secure: false
},
}
當(dāng)配置的代理數(shù)量超過十個時(shí)，開發(fā)環(huán)境編譯打包時(shí)會報(bào)以下錯誤：
為了解決報(bào)錯，也同時(shí)減少代碼體積，我們可以對具有同一個target的配置項(xiàng)進(jìn)行合并，由上文我們可知，這里其實(shí)是一個正則匹配的過程，那我們就可以利用正則語法將他們進(jìn)行合并：
proxy: {
'/api/action|/api/action3': {
target: 'http://192.191.1.3',
changeOrigin: true,
ws: true,
secure: false
},
'/api/action2|/api/action4'': {
target: 'http://192.191.1.4',
changeOrigin: true,
ws: true,
secure: false
},
'/api/action5|/api/action7': {
target: 'http://192.191.1.5',
changeOrigin: true,
ws: true,
secure: false
},
'/api/action6|/api/action8': {
target: 'http://192.191.1.6',
changeOrigin: true,
ws: true,
secure: false
},
'/api/action9': {
target: 'http://192.191.1.7',
changeOrigin: true,
ws: true,
secure: false
},
'/api': {
target: 'http://192.191.1.2',
changeOrigin: true,
ws: true,
secure: false
},
'/': {
target: 'http://192.191.1.1',
changeOrigin: true,
ws: true,
secure: false
},
}
當(dāng)然，在正式部署的時(shí)候，還是需要后端去做統(tǒng)一代理。
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue?導(dǎo)入js中的方法,本文通過兩種方法結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了Vue3基于rem比例H5縮放方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要介紹了Vue之插槽(Slot)的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本篇文章主要介紹了vue-loader教程介紹，vue-loader就是告訴webpack如何將vue格式的文件轉(zhuǎn)換成js。有興趣的可以了解一下2017-06-06
這篇文章主要介紹了vue中返回結(jié)果是promise的處理方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue?下載文檔亂碼的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue創(chuàng)建項(xiàng)目卡住不動,vue?create?project卡住不動的解決
這篇文章主要介紹了vue創(chuàng)建項(xiàng)目卡住不動,vue?create?project卡住不動的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了vue基于Element構(gòu)建自定義樹的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
Vue封裝Swiper實(shí)現(xiàn)圖片輪播效果
圖片輪播是前端中經(jīng)常需要實(shí)現(xiàn)的一個功能。最近學(xué)習(xí)Vue.js，就針對Swiper進(jìn)行封裝，實(shí)現(xiàn)一個簡單的圖片輪播組件。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
使用vue實(shí)現(xiàn)簡單鍵盤的示例(支持移動端和pc端)
這篇文章主要介紹了使用vue實(shí)現(xiàn)簡單鍵盤的示例(支持移動端和pc端)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12