build시 환경변수 설정방법

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

22.09.14 23:36 작성

3.8K

안녕하세요?

.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

지식공유자

2022. 09. 16. 16:09

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

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

질문자

2022. 09. 16. 21:07

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

감사합니다 ㅎㅎ

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

지식공유자

2022. 09. 16. 21:22

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

질문자

2022. 09. 16. 21:58

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

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