해결

정의

// .env
VITE_KEY=SECRET_KEY

// .env.development
VITE_KEY=SECRET_KEY_DEVELOPMENT

vite 에서 .env를 사용하기 위해선 key값 앞에 VITE를 붙여야한다.

.env에 정의된 내용은 기본값이된다.
만약 .env와 .env.devleopment에 동일한 키가 정의되어있다면, development 모드 일 경우 .env.development에 정의된 값을 불러오고 그 외의 모드일 땐 .env에 정의된 값을 불러온다.

사용

const key = import.meta.env.VITE_KEY
//or
const { VITE_KEY } = import.meta.env

위의 코드를 사용하여 .env 에 정의한 값을 가져올 수 있다.

추가 정보

import.meta.env.MODE // (1)
import.meta.env.PROD // (2)
import.meta.env.DEV // (3)

(1) 프로덕션 모드인지 개발 모드인지 반환해준다.
(2) 프로덕션 모드일 경우 true를 반환한다.
(3) 개발 모드일 경우 true를 반환한다.