同样的接口,同样的前缀,只是后端地址不一样,怎么同时代理多个地址呢?也就是一个前端,怎么连接多个后端的地址?
既然 vue.config.js 能代理一个 proxy,那么能不能代理多个 proxy 呢?当然能!
本文先讲解传统模式的代理,以后写一个函数式代理 vite 有更好的代理方式,暂且不表
创建一个空的 vue2 项目
vue create project-name
默认情况下,npm run serve 会启动 8080 端口
我希望不同的端口,指向不同的后端代理 proxy 地址,如:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// webpack-dev-server 相关配置
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' // 默认代理地址
}
}
上述代码,默认设置启动端口为 8100,并且 getProxyTarget 函数可以根据不同的端口,指向不同的代理地址。 ### 配置 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"
]
}
上述代码,重点是 serve:8005 这行,就是你要代理哪个端口,这里需要你在 vue.config.js 写对应的映照 proxy
上述配置已经实现了我们的需求,那么,具体测试一下吧。 本地启动两个 nodejs 服务,分别为 7001 和 7002 端口,内容如下
/// 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个端口启动,写一个测试函数
mounted() {
fetch('/api').then(() => {})
}
效果如下:
8100 已经成功代理 7001 了
同样的,8105 也代理了 7002
其余的 vue3,react,也可以用类似的思路
如果有其他更好的方案,可以评论留言。
顺便给大家分享一下,民族企业大厂,前后端测试捞人,待遇给的还不错,感兴趣的可以来试试!