Vue項(xiàng)目配置多個(gè)代理服務(wù)器的多種方案
更新時(shí)間：2025年07月15日 09:30:17 作者：江城開(kāi)朗的豌豆
今天咱們來(lái)聊聊Vue項(xiàng)目中一個(gè)非常實(shí)用的技巧?-?如何配置多個(gè)代理服務(wù)器,相信不少小伙伴在對(duì)接多個(gè)后端服務(wù)時(shí)都遇到過(guò)跨域問(wèn)題,這篇文章就教你如何優(yōu)雅解決,需要的朋友可以參考下
為什么需要多代理？
在實(shí)際開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到這些情況：
- 需要同時(shí)對(duì)接測(cè)試環(huán)境和生產(chǎn)環(huán)境API
- 項(xiàng)目調(diào)用了多個(gè)不同域名的微服務(wù)
- 某些特殊接口需要走特定代理
這時(shí)候，單一代理配置就捉襟見(jiàn)肘了。下面我就分享幾種實(shí)用的多代理配置方案。
方案一：vue.config.js基礎(chǔ)配置
這是最基礎(chǔ)的代理配置方式，適合大多數(shù)場(chǎng)景。
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://我的測(cè)試環(huán)境.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/other-api': {
target: 'http://我的其他服務(wù).com',
changeOrigin: true,
pathRewrite: {
'^/other-api': ''
}
}
}
}
}
使用時(shí)代碼中這樣調(diào)用：
// 調(diào)用測(cè)試環(huán)境API
axios.get('/api/user/info')
// 調(diào)用其他服務(wù)API
axios.get('/other-api/product/list')
優(yōu)點(diǎn)：
- 配置簡(jiǎn)單直觀
- 適合大多數(shù)項(xiàng)目
- 不同路徑對(duì)應(yīng)不同服務(wù)
方案二：環(huán)境變量動(dòng)態(tài)切換
如果需要根據(jù)環(huán)境動(dòng)態(tài)切換代理目標(biāo)，可以這樣配置：
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: process.env.VUE_APP_API_BASE,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
然后在不同環(huán)境的.env文件中配置：
# .env.development VUE_APP_API_BASE=http://我的開(kāi)發(fā)環(huán)境.com # .env.production VUE_APP_API_BASE=http://我的生產(chǎn)環(huán)境.com
方案三：更靈活的多代理配置
對(duì)于復(fù)雜場(chǎng)景，可以這樣組織代碼：
// vue.config.js
const proxyTable = {
dev: {
'/api': {
target: 'http://dev.我的服務(wù).com',
// 其他配置...
},
'/auth': {
target: 'http://dev.我的認(rèn)證服務(wù).com',
// 其他配置...
}
},
test: {
'/api': {
target: 'http://test.我的服務(wù).com',
// 其他配置...
}
// 其他代理...
}
}
module.exports = {
devServer: {
proxy: proxyTable[process.env.NODE_ENV] || proxyTable.dev
}
}
實(shí)戰(zhàn)案例：電商項(xiàng)目多服務(wù)代理
假設(shè)我們開(kāi)發(fā)一個(gè)電商項(xiàng)目，需要對(duì)接：
- 用戶服務(wù) user-service
- 商品服務(wù) product-service
- 訂單服務(wù) order-service
配置如下：
module.exports = {
devServer: {
proxy: {
'/user': {
target: 'http://user-service.我的公司.com',
changeOrigin: true,
pathRewrite: {'^/user': ''}
},
'/product': {
target: 'http://product-service.我的公司.com',
changeOrigin: true,
pathRewrite: {'^/product': ''}
},
'/order': {
target: 'http://order-service.我的公司.com',
changeOrigin: true,
ws: true, // 如果需要WebSocket
pathRewrite: {'^/order': ''}
}
}
}
}
使用時(shí)：
// 獲取用戶信息
axios.get('/user/info')
// 獲取商品列表
axios.get('/product/list')
// 提交訂單
axios.post('/order/create', orderData)
常見(jiàn)問(wèn)題解決方案
1. 代理不生效怎么辦？
- 檢查target地址是否正確
- 確認(rèn)changeOrigin設(shè)置為true
- 重啟devServer
2. WebSocket代理失?。?/h3>
proxy: {
'/socket': {
target: 'ws://我的websocket服務(wù).com',
ws: true,
changeOrigin: true
}
}
proxy: {
'/socket': {
target: 'ws://我的websocket服務(wù).com',
ws: true,
changeOrigin: true
}
}
3. 需要攜帶Cookie怎么辦？
proxy: {
'/api': {
target: 'http://我的服務(wù).com',
changeOrigin: true,
cookieDomainRewrite: {
"*": "localhost" // 把cookie域名重寫為本地
}
}
}
配置建議
根據(jù)我6年的項(xiàng)目經(jīng)驗(yàn)，建議：
- 代理路徑前綴要語(yǔ)義化（如/api、/user等）
- 復(fù)雜項(xiàng)目建議按功能模塊劃分代理
- 生產(chǎn)環(huán)境記得移除或替換代理配置
- 使用環(huán)境變量管理不同環(huán)境的代理目標(biāo)
- 定期檢查代理配置，避免冗余
總結(jié)
通過(guò)合理配置多個(gè)代理，我們可以：
- 輕松解決開(kāi)發(fā)環(huán)境跨域問(wèn)題
- 同時(shí)對(duì)接多個(gè)后端服務(wù)
- 實(shí)現(xiàn)環(huán)境間的無(wú)縫切換
- 提高前端開(kāi)發(fā)效率
寫在最后?
以上就是Vue項(xiàng)目配置多個(gè)代理服務(wù)器的操作指南的詳細(xì)內(nèi)容，更多關(guān)于Vue項(xiàng)目多代理配置的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue3+Hooks實(shí)現(xiàn)4位隨機(jī)數(shù)和60秒倒計(jì)時(shí)的示例代碼
Vue3的Hooks是一種新的 API,本文主要介紹了Vue3+Hooks實(shí)現(xiàn)4位隨機(jī)數(shù)和60秒倒計(jì)時(shí)的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)通訊錄功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
undefined是否會(huì)變?yōu)閚ull原理解析
這篇文章主要為大家介紹了undefined是否會(huì)變?yōu)閚ull原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Vue和React中快速使用Electron的簡(jiǎn)單教程
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
Vue項(xiàng)目中平滑地引入HTML文件的五種方法實(shí)現(xiàn)與對(duì)比
這篇文章主要為大家詳細(xì)介紹了Vue項(xiàng)目中平滑地引入HTML文件的五種方法實(shí)現(xiàn)與對(duì)比,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-10-10
本篇文章主要介紹了深入理解vue的狀態(tài)管理模式vuex，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
今天小編就為大家分享一篇vue.js循環(huán)radio的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
在本篇文章中小編給大家分享了關(guān)于vue源碼架構(gòu)的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們學(xué)習(xí)下。2019-01-01
本篇文章主要介紹了Vue.js源碼之事件機(jī)制，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了vue.js開(kāi)發(fā)環(huán)境的搭建教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05