Как использовать React Customize переменные среды внутри компонента

Question

Я использовал Create-React-App для создания реагирующего приложения, теперь я хочу иметь 3 различные переменные окружения для сборки:

1 - Разработка

2 - Постановка

3 - Производство

Я следую за статьей из Facebook.Исходя из этой статьи, теперь у меня есть 3 файла .env в моем проекте:

.env.development

.env.staging

.env.production 

в каждом из этих файлов .env У меня есть свой API-адрес, основанный на этапе, когда мы создаем приложение, напримерthis:

API_URL=https://MYAPI.com/STAGE

в моем package.json У меня есть следующие сценарии:

"scripts": {
   "start": "env-cmd .env.development react-scripts start",
   "build_development": "env-cmd .env.development npm run build",
   "build_staging": "env-cmd .env.staging npm run build",
   "build": "react-scripts build",
 }

В моем компоненте, который вызывает этот URL API, я использую это для получения API_URL:

let apiUrl = process.env.API_URL

Так что, как только я запустил, например: npm, запустите build_staging

Он соберет приложение, но как только я отладлю его, apiUrl всегда будет undefined.

Не уверен, что не так?у кого-нибудь была такая проблема?

Answer 1

Я считаю, что имена переменных вашей среды должны начинаться с REACT_APP_ с использованием create-react-app, как указано на той же странице GitHub , на которую вы ссылались.Изменение API_URL на REACT_APP_API_URL должно исправить проблему.