Vite의 환경 변수와 모드

Vite로 빌드된 웹 프로젝트를 실행 후 로그인을 시도했는데 404 not found 에러가 나왔다. 원인은 .env 파일에 있어야 할 VITE_API_URL이 없었기 때문이다. 그래서 .env 파일을 생성해주고, VITE_API_URL을 입력해주었다.

그런데 Vite는 환경 변수를 import.meta.env 객체를 활용하여 관리하기 때문에, 어려운 부분은 아니지만 공식 문서를 잠시 정리해봤다.

https://vitejs-kr.github.io/guide/env-and-mode.html

Vite

Vite가 환경 변수를 관리하는 법

Vite는 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있도록 하고 있으며, 아래와 같은 환경 변수에 접근이 가능하다. dotenv를 사용한다.

• import.meta.env.MODE: {string} 현재 앱이 동작하고 있는 모드입니다.
• import.meta.env.BASE_URL: {string} 앱이 제공되는 베이스 URL이며, 이 값은 base 설정에 의해 결정됩니다.
• import.meta.env.PROD: {boolean} 앱이 프로덕션에서 실행 중인지 여부입니다.
• import.meta.env.DEV: {boolean} 앱이 개발 환경에서 실행 중인지 여부이며, 항상 import.meta.env.PROD와 반대되는 값을 가집니다.
• import.meta.env.SSR: {boolean} 앱이서버 에서 실행 중인지 여부입니다.

또, Vite에서 접근 가능한 환경 변수는 일반 환경 변수와 구분을 위해 VITE_라는 접두사를 붙여 나타낸다. 그렇지 않으면 import.meta.env로 접근할 수 없다.