如何在运行时设置 React 的 PUBLIC_URL答案

【问题标题】：How to set React's PUBLIC_URL during runtime如何在运行时设置 React 的 PUBLIC_URL
【发布时间】：2021-05-22 03:02:32
【问题描述】：

我有一个 CRA 新项目，该项目将用于在“iframe”内呈现多个插件的站点上，使用代理为它们提供服务，在实例化插件之前我无法确定 URL。

为了获取插件的位置，他们为我们提供了一个名为 getOriginProxyUrl() 的函数，它返回一个路径名（类似于 /plugins/plugin-name/random-code-ID/random-domain/）。

我的问题出现在此配置下加载反应块期间，index.html 正确加载，但 bundle.js 和 chunks[..].js 文件返回 404，因为 URL 试图指向 /static/js/... 而不是 @987654327 @

由于我使用的是 CRA，因此我进行了调查，发现设置一个名为 PUBLIC_URL 的 .env 变量可以帮助我正确设置此 URL，我通过硬编码 getOriginProxyUrl() 函数返回的公共路径进行了测试，它允许我可以毫无问题地在他们的“iframe”中使用我的 React 应用程序。

我的问题是，有没有办法在运行时设置这个 PUBLIC_URL（可能在 index.html 文件中）而不是设置 .env 文件或 env 变量？

我还尝试按照Change Webpack's publicPath on the fly 中的说明设置__webpack_public_path__，但它只允许我更改资产（图像和图标）的 URL，并且不适用于静态块

我希望我的问题足够清楚，可以描述我的问题，呵呵，提前谢谢！

【问题讨论】：

标签： javascript reactjs url webpack

【解决方案1】：

我认为最好在 webpack 中使用 environment 和 process.env 作为全局变量，并在 webpack 配置的输出对象中使用它

const ASSET_PATH = process.env.ASSET_PATH || '/';

export default {
  output: {
    publicPath: ASSET_PATH,
  },

  plugins: [
    // This makes it possible for us to safely use env vars on our code
    new webpack.DefinePlugin({
      'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
    }),
  ],
};

或者在飞行中

__webpack_public_path__ = process.env.ASSET_PATH;

【讨论】：

嗨！谢谢你的回答，不幸的是，这不是我要找的，这只有助于资产方面（图像，字体等，正如我在问题中提到的），我的问题是静态捆绑文件（js具有所有反应代码的文件）：/我无法使用环境变量，因为我不知道代理将向我发送数据的 URL

【解决方案2】：

看看下面的

【讨论】：

嗨！感谢您的回答，不幸的是我无法使用环境变量，因为我不知道代理将向我发送数据的 URL：/
嘿，如果您使用 Nginx 兼容的解决方案方法，您可以有一个调用 getOriginProxy 的启动脚本，并使用它在您的应用程序中使用的 js 文件中设置变量。实际上，您的解决方案将非常相似，只是您调用的是函数而不是 env vars。
@lex 谢谢。如果您发现答案有帮助，请点赞并将其标记为答案，以便其他人也能看到。