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

Question

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

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

1. 如果在本地运行，则脚本需要来自“ https://my-dev-server”（也就是说，在本地运行时，应从DEV环境中提取脚本）
2. 如果部署到DEV，QA或PROD，则脚本需要来自%PUBLIC_URL%

如果我使用脚本标记（例如...），则此方法已经适用于部署的环境（上面的＃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

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

您现在可以在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>