React App 만들기: index.html 환경변수를 사용합니다.
예를 들어 환경변수를 주입하는 방법이 있습니까?REACT_APP_MY_API에index.html파일링?
이것에 의하면, 할 수 있지만, 나는 그것을 할 수 없을 것 같습니다.
.env
REACT_APP_MY_API=https://something.com
index.displaces를 표시합니다.
<script type="text/javascript">
console.log("%REACT_APP_MY_API%") // undefined
console.log("%NODE_ENV%") // development
</script>
(거의) 새로운 CRA 셋업을 시도했는데, 효과가 있습니다.
<head>
<title>React App</title>
<script type="text/javascript">
console.log("%REACT_APP_TEST%") // OK
console.log("%NODE_ENV%") // development
</script>
</head>
서버를 다시 시작해보셨습니까?방금 당신의 예시로 테스트 변수를 변경하려고 했는데 개발 서버를 재시작하면 작동합니다.
댓글에서 지적한 바와 같이 CRA의 공식 문서에는 이에 대한 섹션이 있습니다.
변수를 .env 파일에 추가할 때는 반드시 create-react-app을 재시작하십시오.
또한 >= react-display@0.9가 있는지 확인합니다.
빌드 언어 버전이 다양한 사이트의 메타 제목에 .env 변수를 사용합니다.
<title>%REACT_APP_SITE_TITLE%</title>
문서(여기)
- 확실히 해두다
react-scripts종속성 버전이 다음 버전보다 크거나 같음0.0.9 - 을 작성하다
.env같은 레벨로 파일을 작성하다package.json - 모든 변수가 로 시작하는지 확인합니다.
REACT_APP_예를 들어,REACT_APP_TITLE - 사용자 js/ts 코드에서 사용:
process.env.REACT_APP_XXX - 또는 html 코드로 둘러싸여 있습니다.
%즉,<title>%REACT_APP_TITLE%</title> - 개발 서버를 재시작하거나 변경 시 앱을 다시 부팅합니다.
.env파일
스크립트 태그에 환경변수를 삽입하려면 변수를 따옴표로 묶으십시오.
<script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_MAP_API%&v=3.exp&libraries=places" async
></script>
이렇게 'NODE_ENV=개발 npm 시작'을 시도했더니 잘 된다.
2022년 솔루션
리액트 앱을 만들 때 가지고 있다..env.production,.env.staging그리고..env.development.
다 합쳐서.env가지고 있는 파일REACT_APP_FB_ID.
그래서...index.html그냥 쓰는 거예요.<meta name="fb:app_id" content="%REACT_APP_FB_ID%" />
언급URL : https://stackoverflow.com/questions/51744375/create-react-app-using-environment-variables-in-index-html
'programing' 카테고리의 다른 글
| 플라스크에서 ajax 호출을 사용하여 파일을 업로드하는 방법 (0) | 2023.03.28 |
|---|---|
| apache에서 nginx로: 워드프레스 다시 쓰기 규칙 (0) | 2023.03.28 |
| 'string'은 유형 '{}'을(를) 인덱싱하는 데 사용할 수 없습니다. (0) | 2023.03.28 |
| ORA-12516, TNS: 리스너가 사용 가능한 핸들러를 찾을 수 없음 (0) | 2023.03.28 |
| AWS 응용 프로그램에 대한 스프링 부팅 시작 오류: 사용 가능한 EC2 메타데이터가 없습니다. (0) | 2023.03.28 |