build시 환경변수 설정방법

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

작성

3.9K

안녕하세요?

.env 파일, .env.development 파일을 생성하여 환경변수를 분리하여 관리하는 방법을 강의에서 가르쳐주셨는데요. import.meta.env.VITE_API_URL 이런 식으로 소스코드에서 가져와서 사용하는 방법도 알려주셔서 잘 이해가 되었습니다.

다만 저렇게 환경변수를 관리하는 방식이 개발중에는 잘 사용하겠는데, vite build시에는 생각한대로 잘 안되네요 ㅠㅠ

예를 들어, 강의에서 알려주셨듯

(1) .env 파일에 production 환경에서 사용할 환경 변수를 기입하고

(2) vite.config.js 파일에서 mode : 'production' line을 추가한 후 build했는데

(3) dist 폴더의 build 결과물에서는 .env파일이 아닌 .env.development의 환경변수가 적용되어 있습니다 ㅠㅠ

도움주시면 정말 감사하겠습니다!!

답변 2

지식공유자

안녕하세요 :)
우선 참고로 말씀드리면 Vite Config mode옵션은 build시 자동으로 Default Value가 "production"으로 적용이 됩니다.
* mode 옵션 관련 API 문서

console.log(import.meta.env.VITE_API_URL) 콘솔로그로 한번 출력해 보시겠어요?
혹시나해서 저도 vite build 후 vite preview로 테스트를 해봤을때 정상적으로 출력이돼서요.

질문자

.env.production 파일을 새롭게 만들어서 build 후 console.log 찍어보니 잘 build되었습니다...! 말씀주신대로, vite config 파일에서 mode를 따로 적지 않으니 production으로 빌드되는 것도 확인했습니다.

감사합니다 ㅎㅎ

그럼 이렇게 '.env.production' 파일에 production 환경 변수를 관리하는게 권장되는 방법인가요?

지식공유자

회사 또는 팀마다 차이가 있지만 일반적으로 production 환경변수는 그렇게 관리 합니다.
아래 링크 남겨 드릴테니 확인하시고 필요한 상황에 맞게 관리하시면 될 것 같습니다 🙂

질문자

큰 도움이 되었습니다! 감사합니다~

인프런 커뮤니티 질문&답변