公共 index.html 中的 CRA 变量替换答案

【问题标题】：CRA variable replacement in public index.html公共 index.html 中的 CRA 变量替换
【发布时间】：2019-03-08 15:27:28
【问题描述】：

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

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

如果我使用诸如 ... 之类的脚本标签，这已经适用于已部署的环境（上面的#2）

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

但是，当在本地运行时，%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

【问题讨论】：

【解决方案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>

【讨论】：