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

Question

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

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

1. 如果在本地运行，那么脚本需要来自“ https://my-dev-server ”（即本地运行时，脚本要从DEV环境中拉取）
2. 如果部署到 DEV、QA 或 PROD，则脚本需要来自%PUBLIC_URL%

如果我使用脚本标记，例如 ...

<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

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>