Vite의 환경 변수

Vite에서 환경 변수 접근을 위해 옳게 표기한 객체는?

1. const API_BASE_URL: string = import.meta.env.VITE_API_BASE_URL;
2. const API_BASE_URL: string = process.env.API_BASE_URL;
3. const API_BASE_URL: string = import.meta.env.API_BASE_URL;

정답부터 말하자면 답은 1번이다.

(공식 사이트에 따르면 3번도 틀린건 아님. 다만 내가 실행이 안 됐음;;)

1. import.meta.env.VITE_API_BASE_URL
   
   Vite 빌드 도구에서 사용하는 방식이다.
   Vite는 Vue.js 및 다른 프레임워크용으로 설계된 빠른 개발 도구이며, .env 파일에 정의된 환경 변수를 import.meta.env를 통해 노출한다.
   이 방식은 주로 Vite 프로젝트에서 사용된다.
   Vite는 ES 모듈을 사용하므로 이를 통해 환경 변수에 쉽게 액세스할 수 있다.

2. process.env.API_BASE_URL
   
   일반적인 Node.js 환경에서 사용되는 방식이다.
   Node.js의 process.env 객체를 통해 환경 변수에 액세스한다.
   일반적으로 서버 측 백엔드 코드 또는 스크립트에서 사용된다.
   클라이언트 측 브라우저 환경에서는 이 방식이 작동하지 않는다.

3. import.meta.env.API_BASE_URL

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

그래서 import.meta.env.VITE_API_BASE_URL와 동일하다고 생각했다.

---

404 error 발생

처음에는 import.meta.env.API_BASE_URL를 사용했는데 계속 axios 404 error가 발생했다.

---

해결

사이트 아래로 더 내려가면

참고로, Vite에서 접근 가능한 환경 변수는 일반 환경 변수와 구분을 위해 VITE_ 라는 접두사를 붙여 나타냅니다.

라고 나와있다. 그래서 VITE_를 붙였더니 잘 연결이 됐다...

---

결론

Vite 공식 사이트에 들어가면 3번을 사용해도 접근 가능하다고 하는데... 나는 안됐다...
Vite 번들러를 사용할 때 env에는 VITE_API_BASE_URL=주소라고 쓰고 환경변수를 가져올 때는 import.meta.env.VITE_API_BASE_URL를 사용하자!
명확한 VITE_ 접두어 사용!!

---

참고자료
Vite의 환경 변수와 모드