使用常量/变量作为 webpack 开发服务器代理 URL 模式

Question

在我们的开发服务器设置中，我们使用 webpack-dev-server 代理设置通过中间件服务器连接其他 API。有时我们必须更改中间件服务器设置，并且在不更改多个位置的信息的情况下，我们希望将它们保存在一个位置。

因此我们尝试了以下方法，

const MIDDLEWARE_SERVER = 'https://midlleware.server';
const MIDDLEWARE_RESOURCE = '/xyz';
const MIDDLEWARE_API_ENDPOINT = MIDDLEWARE_SERVER + MIDDLEWARE_RESOURCE + '/api';

devserver: {
   proxy: {
       MIDDLEWARE_RESOURCE : {
          target: MIDDLEWARE_API_ENDPOINT;
          pathRewrite: { MIDDLEWARE_RESOURCE: '' },
   }
}

这不起作用，导致 404 错误，因为 URL 模式尚未识别（我们通过捕获 onProxyReq 事件进行检查）。

但是，如果我们在代理部分将 MIDDLEWARE_RESOURCE 替换为“/xyz”，它就可以工作。

这是提供“代理”模式的限制吗？

谢谢

Answer 1

我能够通过使用 [MIDDLEWARE_RESOURCE] 表示法让它工作。如下所示

const MIDDLEWARE_SERVER = 'https://midlleware.server';
const MIDDLEWARE_RESOURCE = '/xyz';
const MIDDLEWARE_API_ENDPOINT = MIDDLEWARE_SERVER + MIDDLEWARE_RESOURCE + '/api';

devserver: {
   proxy: {
       [MIDDLEWARE_RESOURCE] : {
           target: MIDDLEWARE_API_ENDPOINT;
           pathRewrite: { MIDDLEWARE_RESOURCE: '' },
   }
}