聊天讨论 前端开发的"端水艺术":如何优雅驾驭多后端并行联调?

coderwamgh(wang) · 2025年03月18日 · 21 次阅读

同样的接口,同样的前缀,只是后端地址不一样,怎么同时代理多个地址呢?也就是一个前端,怎么连接多个后端的地址?

  • 一个前端,需要同时和 N 个后端联调
  • 一个需求里有若干个模块,分别给不同的后端开发,前端需要和 N 个后端联调
  • 本地开启一个端口给测试,然后你需要去做其他的需求,但是其他的需求需要连接另一个后端接口
  • 其他情况,总之:1 个前端 VS N 个后端 上述场景,都是一个前端,联调 N 个后端的场景,你可能没遇到过,但是确实存在上述的场景。尤其是第三种最为常见,你会一直等测试完了、再去换一个后端代理地址接着开发吗?当然不能,这样做很浪费时间,说明你不是一个合格的牛马,牛马的觉悟不够,牛马是不会让自己闲着的。 那么,怎么办呢?和 A 联调时 proxy 指向 url-A,和 B 联调时 proxy 指向 url-B……换其他人联调时,你是把本地项目关掉,然后换个 proxy 代理、再重启一下吗? 当然可以,如果你不嫌麻烦的话!那么有没有好办法呢? 这个问题问得好,当然有了! # 解决方案 > 本例以 vue2 的 vue-cli 方式【webpack】为例

思路

既然 vue.config.js 能代理一个 proxy,那么能不能代理多个 proxy 呢?当然能!

本文先讲解传统模式的代理,以后写一个函数式代理 vite 有更好的代理方式,暂且不表

实现步骤

创建项目

创建一个空的 vue2 项目 vue create project-name 默认情况下,npm run serve 会启动 8080 端口

目标

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

  • 8100 端口,代理后端 7001 端口
  • 8105 端口,代理后端 7002 端口 没毛病吧?本文以代理 2 个后端为例,其余的大家自行补充 ## 前端配置 ### 安装 cross-env yarn add cross-env cross-env 是 nodejs 设置环境变量的工具,它解决了不同操作系统之间环境变量设置语法不一致的问题,具体可自行搜索 ### 配置 vue.config.js
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,也可以用类似的思路 如果有其他更好的方案,可以评论留言。

顺便给大家分享一下,民族企业大厂,前后端测试捞人,待遇给的还不错,感兴趣的可以来试试!

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请 注册新账号