Vue2에선
"VUE_APP_{변수명}=123445" 처럼
접두사 "VUE_APP_"을 사용해서 환경변수를 사용할 수 있었다.
Vue3에서 Vite를 사용해서 번들링한다면,
접두사 "VITE_" 를 사용해야 한다!
변수를 사용할 땐 "import.meta.env.VITE_{변수명}" 으로 사용하자!!
// .env
VITE_SOME_KEY=123
console.log(import.meta.env.VITE_SOME_KEY) // 123
https://ko.vitejs.dev/guide/env-and-mode.html#env-files
Vite
Vite, 차세대 프런트엔드 개발 툴
ko.vitejs.dev
'Vue' 카테고리의 다른 글
[Vue3, Vuetify3, Typescript] Composition API를 사용하여 $refs를 통해 DOM 접근하기(ref 사용법) (2) | 2023.12.06 |
---|---|
[Vue3] Composition API 전역 변수 파일 분리 (3) | 2023.11.28 |
vuetify의 Navigation Drawers 컴포넌트 동작하지 않을 때(Vue3) (0) | 2023.10.26 |
Vue3 페이지 레이아웃 구성하는 2가지 방법 (2) | 2023.10.23 |
Vue3에서 pdfmake로 pdf 문서 만들기(feat. Grunt, Typescript, 에러해결) (2) | 2023.10.16 |
Vue2에선
"VUE_APP_{변수명}=123445" 처럼
접두사 "VUE_APP_"을 사용해서 환경변수를 사용할 수 있었다.
Vue3에서 Vite를 사용해서 번들링한다면,
접두사 "VITE_" 를 사용해야 한다!
변수를 사용할 땐 "import.meta.env.VITE_{변수명}" 으로 사용하자!!
// .env
VITE_SOME_KEY=123
console.log(import.meta.env.VITE_SOME_KEY) // 123
https://ko.vitejs.dev/guide/env-and-mode.html#env-files
Vite
Vite, 차세대 프런트엔드 개발 툴
ko.vitejs.dev
'Vue' 카테고리의 다른 글
[Vue3, Vuetify3, Typescript] Composition API를 사용하여 $refs를 통해 DOM 접근하기(ref 사용법) (2) | 2023.12.06 |
---|---|
[Vue3] Composition API 전역 변수 파일 분리 (3) | 2023.11.28 |
vuetify의 Navigation Drawers 컴포넌트 동작하지 않을 때(Vue3) (0) | 2023.10.26 |
Vue3 페이지 레이아웃 구성하는 2가지 방법 (2) | 2023.10.23 |
Vue3에서 pdfmake로 pdf 문서 만들기(feat. Grunt, Typescript, 에러해결) (2) | 2023.10.16 |