如何配置Vue.js devServer proxy实现同一路径转发到不同动态端口

你之前写的同路径重复声明配置的方式无效，JavaScript对象中同名key会被后定义的内容直接覆盖，无法实现多端口转发需求。

Vue CLI的devServer代理底层基于http-proxy-middleware实现，可通过自定义router函数实现请求的动态分发，以下是符合需求的配置：

// 定义/world路径对应的所有后端实例地址
const WORLD_API_SERVERS = [
  'http://localhost:10001',
  'http://localhost:10002'
]
// 轮询计数变量，每次请求后切换实例
let pollIndex = 0

module.exports = {
  transpileDependencies: ["vuetify"],
  devServer: {
    proxy: {
      // /world路径规则优先级更高，会先匹配
      '/world': {
        changeOrigin: true,
        pathRewrite: {'^/world/': '/world/'},
        // 自定义路由逻辑，按轮询策略返回目标地址
        router: () => {
          const target = WORLD_API_SERVERS[pollIndex]
          pollIndex = (pollIndex + 1) % WORLD_API_SERVERS.length
          return target
        }
      },
      // 其余所有请求走默认的10000端口主API
      '/': {
        target: 'http://localhost:10000',
        changeOrigin: true
      }
    }
  }
};

说明 #

• 上述配置默认采用轮询策略分发请求，如果你需要按请求参数、Cookie等其他规则分配到指定端口，修改router函数内的逻辑即可
• 代理规则的匹配顺序为从上到下，因此需要把更具体的路径规则（如/world）放在通用规则（如/）前面，否则会被通用规则优先拦截
• 如果需要新增更多/world的后端实例，直接往WORLD_API_SERVERS数组里加地址即可，无需修改其他逻辑

内容的提问来源于stack exchange，提问作者Ark