使用 constant/variable 作为 webpack 开发服务器代理 URL 模式

Question

在我们的开发服务器设置中，我们使用 webpack-dev-server 代理设置通过中间件服务器连接 ot 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: '' },
   }
}

由于无法识别 URL 模式（我们通过捕获 onProxyReq 事件进行了检查），这导致了 404 错误。

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

提供 'proxy' 模式有局限性吗？

谢谢

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: '' },
   }
}

使用 constant/variable 作为 webpack 开发服务器代理 URL 模式

Using constant/variable as webpack dev server proxy URL pattern

webpack-dev-server

webpack-dev-middleware