使用vue項目配置多個代理的注意點
在Vue項目的開發(fā)過程中,為了本地調試方便，我們通常會在 vue.config.js 中配置 devServer 來在本地啟動一個服務器，在這個選項中，我們會配置proxy 屬性來將指向到本地的請求（例如： /api/action） 代理到后端的開發(fā)服務器上（例如： 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
}
}
},
```
在這個配置中，要注意以下兩點：
接口地址有重疊地址時，將匹配度低的放在后面。
例如：
- * 將 / 匹配到 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 上面去
原因是這里的匹配實際上是一個正則匹配的過程，當我們請求 /api 時，首先讀取到了配置項中的第一個，拿配置中的 / 去匹配請求中的 /api ， 發(fā)現(xiàn)請求的/api 中包含配置項/, 匹配成功，直接將請求代理到了 192.191.1.1 上面去， 對/api/action的匹配也同理。
也就是說，它的匹配規(guī)則是： 拿配置項中的地址去匹配請求中的地址，如果請求中的地址中包含配置中的地址，則匹配成功，否則，拿下一個配置項繼續(xù)匹配。
所以，配置中的地址與請求地址中匹配的字符越少，匹配度越低。 上例中配置中的地址（/）與請求地址（/api）只有一個字符是匹配的，所以匹配度低。
所以我們正確的寫法應該是：
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
}
}
這樣到三個地址的請求就都可以正確代理到相應的地址去了
多個地址代理同一個target 時，可進行合并
在實際應用中，由于后端采用微服務模式開發(fā)，在開發(fā)階段，我們可能會將不同的服務代理到不同的地址上，當服務很多時，我們代理的數(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
},
}
當配置的代理數(shù)量超過十個時，開發(fā)環(huán)境編譯打包時會報以下錯誤：
為了解決報錯，也同時減少代碼體積，我們可以對具有同一個target的配置項進行合并，由上文我們可知，這里其實是一個正則匹配的過程，那我們就可以利用正則語法將他們進行合并：
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
},
}
當然，在正式部署的時候，還是需要后端去做統(tǒng)一代理。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了Vue的基本知識，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了vue在手機中通過本機IP地址訪問webApp的方法,需要的朋友可以參考下2018-08-08
Vue2和Vue3在v-for遍歷時ref獲取dom節(jié)點的區(qū)別及說明
這篇文章主要介紹了Vue2和Vue3在v-for遍歷時ref獲取dom節(jié)點的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實現(xiàn)文件上傳功能時,如果單文件上傳是比較簡單的,但是在實際需求中,往往會在上傳文件時伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧2023-08-08
這篇文章主要介紹了fetch網(wǎng)絡請求封裝的示例內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2021-11-11
一般我們的vue項目都是單頁面的,其實因為vue在工程化開發(fā)的時候依賴了webpack,webpack幫我們將所有的資源整合到一起而形成一個單頁面,下面這篇文章主要給大家介紹了關于vue多頁面項目開發(fā)的相關資料,需要的朋友可以參考下2022-01-01
今天小編就為大家分享一篇vue 利用路由守衛(wèi)判斷是否登錄的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vxe-table?實現(xiàn)按回車鍵自動新增一行(示例代碼)
本文通過示例代碼介紹了vxe-table新版本中實現(xiàn)回車自動換行功能的方法,通過設置keyboard-config.isLastEnterAppendRow參數(shù)可以控制是否開啟該功能,當回車鍵在最后一行按下時,會自動新增一行,并將光標移動到新行,代碼簡單易懂,感興趣的朋友跟隨小編一起看看吧2024-12-12
vue3使用vue3-print-nb實現(xiàn)區(qū)域打印功能
這篇文章主要給大家介紹了關于vue3使用vue3-print-nb實現(xiàn)區(qū)域打印功能的相關資料,在日常操作中,相信很多人在Vue怎么用插件實現(xiàn)打印功能問題上存在疑惑,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue?導入js中的方法,本文通過兩種方法結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07