Vite.js 에서 환경변수 사용 .env

React에서 사용하던 react-dotenv 를 사용하였으나 계속해서 에러를 해결 못하였고,  Vite 프로젝트 설정과 충돌하고 있는 것으로 보입니다. 그런데,  Vite의 내장 환경 변수 관리 기능이 있음을 알았고, 이를 이용해서 쉽게 해결 할 수 있었습니다.

 

Vite 환경 변수 로딩 사용

 Vite는 .env 파일을 자동으로 로드하고, import.meta.env를 통해 환경 변수에 접근할 수 있게 해줍니다. 예를 들어, .env 파일에 다음과 같이 설정할 수 있습니다.

VITE_API_URL="AI......sw"

 

그리고 애플리케이션 코드에서는 다음과 같이 접근할 수 있습니다.

console.log(import.meta.env.VITE_API_URL);
or
const Google_API_KEY = import.meta.env.VITE_API_URL

 

물론 import 문이나 package.json 에서 "scripts" 를변형 할 필요도 없이 해결되었습니다.