build시 환경변수 설정방법
4464
작성한 질문수 6
안녕하세요?
.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
1
안녕하세요 :)
우선 참고로 말씀드리면 Vite Config mode옵션은 build시 자동으로 Default Value가 "production"으로 적용이 됩니다.
* mode 옵션 관련 API 문서
console.log(import.meta.env.VITE_API_URL) 콘솔로그로 한번 출력해 보시겠어요?
혹시나해서 저도 vite build 후 vite preview로 테스트를 해봤을때 정상적으로 출력이돼서요.
0
.env.production 파일을 새롭게 만들어서 build 후 console.log 찍어보니 잘 build되었습니다...! 말씀주신대로, vite config 파일에서 mode를 따로 적지 않으니 production으로 빌드되는 것도 확인했습니다.
감사합니다 ㅎㅎ
그럼 이렇게 '.env.production' 파일에 production 환경 변수를 관리하는게 권장되는 방법인가요?
0
회사 또는 팀마다 차이가 있지만 일반적으로 production 환경변수는 그렇게 관리 합니다.
아래 링크 남겨 드릴테니 확인하시고 필요한 상황에 맞게 관리하시면 될 것 같습니다 🙂
composable: alert 창이 안떠요
0
708
2
Nuxtjs3 강의 계획은 없으신가요?
0
527
1
axios 컴포저블 함수 구현 2에서
0
470
1
composable과 pinia store - 둘 중 하나를 선택하는 기준
1
1594
1
코드 수정 문의
0
440
1
강의교안 수정 요청드립니다.
0
591
1
Pinia 사용 시 composition api
0
1388
1
createPost()의 async, awiat
0
525
1
slot 사용 관련 문의
1
413
1
Filter 구현하기에서 input v-model 질문 있습니다.
0
548
2
라우터 해시 모드 추가 질문
0
540
1
네비게이션 가드 및 플러그인 관련 질문입니다.
0
367
1
트랜지션(transition) 관련 질문드립니다.
0
548
1
json-server에 대해 궁금한게 있습니다~
0
379
1
Vue3 에서 router-link 에 이벤트 추가 방법
0
1191
1
기본편에도 crud 하는게 있을까요?
0
399
1
jsconfig.js 에러
0
384
1
headers 값을 못찾아요~
0
379
1
vite vue3에서 ie safari babel
0
771
1
composables 전역등록
0
297
1
stores 다른 파일에서 state 가져오기
0
439
1
computed에서 인자 전달방법
0
572
1
components.d.ts 자동작성 안됨
0
716
1
cors 에러
0
569
1