Develop Note by J.S.

[Vite] Vite 환경변수 활용 본문

FrontEnd/Vite&Vue-cli

[Vite] Vite 환경변수 활용

js-web 2023. 7. 5. 11:27
반응형

Vite에서 .env[mode] 파일에 설정한 환경변수를 가져오는 키워드는 import.meta.env입니다.

 

1. 환경변수 파일 생성

.env.[mode] 환경변수 파일을 프로젝트 root경로에 생성합니다. 

//vue-cli .env.dev
VUE_APP_IMG_URL = 'https://img-url/'
VUE_APP_API_URL = 'https://vue-cli-api-url'
VUE_APP_DOMAIN = 'https://domain.net'


//vite .env.dev
VITE_IMG_URL = 'https://img-url/'
VITE_API_URL = 'https://vite-api-url'
VITE_DOMAIN = 'https://domain.net'

vue-cli에서는 환경변수에 prefix가 'VUE_APP_' 이었으나 VITE에서는 'VITE_'로 변경되었습니다.

2. package.json

// vue-cli package.json
"scripts": {
    "serve": "vue-cli-service serve --mode local",
    "build:prod": "vue-cli-service build --mode prod",
},

// vite package.json
"scripts": {
    "dev": "vite --mode local",
    "build": "vite build --mode prod",
},

 

3. tsconfig.json

"compilerOptions": {
    ...
    "types": ["vite/client"], //설정없이 import.meta.env 사용 시 TS error 발생
}

 

4. Code내 환경변수 사용

// vue-cli - script in vue files 
<script setup lang="ts">
console.log(process.env.VUE_APP_API_URL) // https://vue-cli-api-url
</script>

// vite - script in vue files 
<script setup lang="ts">
console.log(import.meta.env.VITE_API_URL) // https://vite-api-url
</script>

 

5. import.meta.env 기본 속성

  • import.meta.env.MODE: {string} 현재 앱이 동작하고 있는 모드입니다.
  • import.meta.env.BASE_URL: {string} 앱이 제공되는 베이스 URL이며, 이 값은 vite.config.js 내 'base' 설정에 의해 결정됩니다.
  • import.meta.env.PROD: {boolean} 앱이 프로덕션에서 실행 중인지 여부입니다.
  • import.meta.env.DEV: {boolean} 앱이 개발 환경에서 실행 중인지 여부이며, 항상 import.meta.env.PROD와 반대되는 값을 가집니다.
  • import.meta.env.SSR: {boolean} 앱이 서버에서 실행 중인지 여부입니다.

 

6. HTML 코드 내 환경변수 활용

먼저 vite-plugin-html-env 모듈을 설치합니다. 

$npm install --save-dev vite-plugin-html-env

이후 vite.conifg.js Plugin에 모듈을 추가합니다. 

import VitePluginHtmlEnv from 'vite-plugin-html-env'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [vue(),
    VitePluginHtmlEnv(),
    VitePluginHtmlEnv({compiler: true})],
})

index.html에서 '<{ENV_NAME}>' 으로 환경변수의 값을 직접 불러올 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App <{VITE_DOMAIN}></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

 

 

 

참고사이트
https://ko.vitejs.dev/guide/env-and-mode.html

https://velog.io/@hicoding/Vite-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-html-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EC%82%AC%EC%9A%A9

반응형

'FrontEnd > Vite&Vue-cli' 카테고리의 다른 글

[Vue-cli] 다중 페이지 (Vue Multi-Instance)  (0) 2023.07.28
[Vite] SourceMap  (0) 2023.07.27
[Vite] process.env vs import.meta.env & Migration  (0) 2023.07.12
[Vite] Vite + Vue3 + Typescript  (0) 2023.07.05
[Vite] Vite란  (0) 2023.07.04
'FrontEnd/Vite&Vue-cli' Related Articles more