public index.html 中的 CRA 变量替换

Question

我理解 %PUBLIC_URL% 的目的，但是我也理解并观察到您不能设置 PUBLIC_URL 并在开发（本地）期间替换它运行。我运行遇到以下情况。

我必须引用托管在特定于部署环境的服务器上的脚本资源。我需要从不同的主机获取此资源，具体取决于这是开发运行还是已部署（例如 QA）：

如果我使用诸如 ...

<script src="%PUBLIC_URL%/a/b/c/my-script.js></script>

然而，当运行ning 在本地时，%PUBLIC_URL% 被替换为“”（空字符串），因此我的脚本是从“/a/b/c/my-script.js”获取的，这导致404.

如何替换自定义环境变量，例如"DEPLOY_HOST"，以及像 ...

这样的脚本标签

<script src="https://%DEPLOY_HOST%/a/b/c/my-script.js></script>

注意：使用 react-scripts v2.1.3

Answer 1

在根目录下创建两个 .env 文件

// file name: .env.development
REACT_APP_MY_API=https://dev.api

// file name: .env.production
REACT_APP_MY_API=https://production.api

请注意：为了使它起作用，变量名必须以REACT_APP_开头，否则它将不起作用。

在您的 index.html 中，您现在可以这样做：

<script>
  console.log('%REACT_APP_MY_API%'); // This will change based on development or production
</script>

或者您可以：

<script src="%REACT_APP_MY_API%/a/b/c/my-script.js"></script>

CRA variable replacement in public index.html