Замена переменной CRA в общедоступном index.html

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>

Примечание: с помощью response-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>