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