프로젝트에 대한 Reactjs 템플릿을 사용하여 vite 앱을 실행하고 .env 파일에서 환경 변수를 가져오려고 하는 시나리오에서. .env에서 환경 변수를 가져오는 일반적인 방법은 다음과 같이 변수에 대해 process.env.SOMETHING을 사용하는 것입니다.

뭔가=비밀 소스

SOMETHING=SECRETSAUCE

이 시점에서 vite.config.ts는 다음과 같습니다:

'vite'에서 { 정의 구성 } 가져오기 '@vitejs/plugin-react'에서 반응 가져오기 // https://vitejs.dev/config/ 기본 정의 구성 내보내기({ 플러그인: [반응()], })

SOMETHING=SECRETSAUCE

그러나 vite에서는 변수 가져오기가 바로 작동하지 않으며 문제를 해결할 수 있는 방법이 많이 있습니다. 나는 그 중 대부분을 시도했고 간단하고 직접적인 방법을 고수하는 것을 느꼈습니다.

아마도 위의 정의와 process.env.*의 기본 가져오기 논리를 사용하면 Uncaught ReferenceError: global is not Defined 오류가 발생했을 것입니다.

Stackoverflow에서 많은 참조를 찾았는데 혼란스럽습니다.

오류에 대한 수정은 아래와 같이 config에서 global을 정의하는 것입니다.

'vite'에서 { 정의 구성 } 가져오기 '@vitejs/plugin-react'에서 반응 가져오기 // https://vitejs.dev/config/ 기본 정의 구성 내보내기({ 플러그인: [반응()], 정의하다: { 전역: {}, }, })

SOMETHING=SECRETSAUCE

이제 이는 또 다른 일반적인 오류 Uncaught ReferenceError: 프로세스가 정의되지 않음으로 이어질 수 있습니다.

다시 말하지만, 웹에는 많은 솔루션이 있으며 일부는 오래되었습니다. 가장 관련성이 높고 구현하기 쉬운 방법은 vite 라이브러리에서 loadEnv를 가져오고 아래와 같이 사용자 정의 로직을 구축하는 것입니다.

'vite'에서 { 정의 구성, 로드Env } 가져오기 '@vitejs/plugin-react'에서 반응 가져오기 // https://vitejs.dev/config/ 기본 정의 내보내기(({ 모드 }) => { const env = loadEnv(mode, process.cwd(), ''); 반품 { 정의하다: { 전역: {}, 'process.env': 환경 }, 플러그인: [반응()], } })

SOMETHING=SECRETSAUCE

그리고 바로 마법이 일어납니다!!

또한 process.env.*를 사용하여 코드에서 환경 변수 가져오기가 dotenv 없이도 잘 작동하므로 dotenv 종속성을 사용할 필요가 없습니다.

즐거운 코딩하세요!