場(chǎng)景

• 1. 一個(gè)前端，需要同時(shí)和N個(gè)后端聯(lián)調(diào)
• 2. 一個(gè)需求里有若干個(gè)模塊，分別給不同的后端開發(fā)，前端需要和N個(gè)后端聯(lián)調(diào)
• 3. 本地開啟一個(gè)端口給測(cè)試，然后你需要去做其他的需求，但是其他的需求需要連接另一個(gè)后端接口
• 4. 其他情況，總之：1個(gè)前端 VS N個(gè)后端

上述場(chǎng)景，都是一個(gè)前端，聯(lián)調(diào)N個(gè)后端的場(chǎng)景，你可能沒遇到過，但是確實(shí)存在上述的場(chǎng)景。尤其是第三種最為常見，你會(huì)一直等測(cè)試完了、再去換一個(gè)后端代理地址接著開發(fā)嗎？當(dāng)然不能，這樣做很浪費(fèi)時(shí)間，說明你不是一個(gè)合格的牛馬，牛馬的覺悟不夠，牛馬是不會(huì)讓自己閑著的。

那么，怎么辦呢？和A聯(lián)調(diào)時(shí)proxy指向url-A，和B聯(lián)調(diào)時(shí)proxy指向url-B……換其他人聯(lián)調(diào)時(shí)，你是把本地項(xiàng)目關(guān)掉，然后換個(gè)proxy代理、再重啟一下嗎？

當(dāng)然可以，如果你不嫌麻煩的話！那么有沒有好辦法呢？

這個(gè)問題問得好，當(dāng)然有了！

解決方案

本例以vue2的vue-cli方式【webpack】為例

思路

既然vue.config.js能代理一個(gè)proxy，那么能不能代理多個(gè)proxy呢？當(dāng)然能！

本文先講解傳統(tǒng)模式的代理，以后寫一個(gè)函數(shù)式代理
vite有更好的代理方式，暫且不表

實(shí)現(xiàn)步驟

創(chuàng)建項(xiàng)目

創(chuàng)建一個(gè)空的vue2項(xiàng)目

vue create project-name

默認(rèn)情況下，npm run serve會(huì)啟動(dòng)8080端口

目標(biāo)

我希望不同的端口，指向不同的后端代理proxy地址，如：

• 8100端口，代理后端7001端口
• 8105端口，代理后端7002端口

沒毛病吧？本文以代理2個(gè)后端為例，其余的大家自行補(bǔ)充

前端配置

安裝cross-env

yarn add cross-env

cross-env是nodejs設(shè)置環(huán)境變量的工具，它解決了不同操作系統(tǒng)之間環(huán)境變量設(shè)置語法不一致的問題，具體可自行搜索

配置vue.config.js

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,// webpack-dev-server 相關(guān)配置devServer: {host: '0.0.0.0',port: process.env.PORT || 8100,open: false,proxy: {'/api': {target: getProxyTarget(process.env.PORT),changeOrigin: true,pathRewrite: { '^/api': '' }}},},
})function getProxyTarget(port) {switch (port) {case '8100':return 'http://127.0.0.1:7001'case '8105':return 'http://127.0.0.1:7002'default:return 'http://127.0.0.1:7001' // 默認(rèn)代理地址}
}

上述代碼，默認(rèn)設(shè)置啟動(dòng)端口為8100，并且getProxyTarget函數(shù)可以根據(jù)不同的端口，指向不同的代理地址。

配置package.json

{"name": "more-proxy","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","serve:8005": "cross-env PORT=8105 vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"cross-env": "^7.0.3","vue": "^2.6.14"},"devDependencies": {"@vue/cli-service": "~5.0.0","vue-template-compiler": "^2.6.14"},"browserslist": ["> 1%","last 2 versions","not dead"]
}

上述代碼，重點(diǎn)是serve:8005這行，就是你要代理哪個(gè)端口，這里需要你在vue.config.js寫對(duì)應(yīng)的映照proxy

測(cè)試

上述配置已經(jīng)實(shí)現(xiàn)了我們的需求，那么，具體測(cè)試一下吧。

本地啟動(dòng)兩個(gè)nodejs服務(wù)，分別為7001和7002端口，內(nèi)容如下

/// 7001端口
const http = require('http');const hostname = '127.0.0.1';
const port = 7001;const server = http.createServer((req, res) => {res.statusCode = 200;res.setHeader('Content-Type', 'text/plain');res.end('my port is 7001!');
});server.listen(port, hostname, () => {console.log(`Server running at http://${hostname}:${port}/`);
});

/// 7002端口
const http = require('http');const hostname = '127.0.0.1';
const port = 7002;const server = http.createServer((req, res) => {res.statusCode = 200;res.setHeader('Content-Type', 'text/plain');res.end('my port is 7002!');
});server.listen(port, hostname, () => {console.log(`Server running at http://${hostname}:${port}/`);
});

然后前端把上面的2個(gè)端口啟動(dòng)，寫一個(gè)測(cè)試函數(shù)

mounted() {fetch('/api').then(() => {})
}

效果如下：
8100已經(jīng)成功代理7001了

同樣的，8105也代理了7002

其余的vue3，react，也可以用類似的思路

如果感興趣，可以點(diǎn)一下關(guān)注，后續(xù)會(huì)出函數(shù)式1前端 VS N后端，更加優(yōu)雅

如果有其他更好的方案，可以評(píng)論留言。