[Vue3] vite.config.js 에서 환경변수 사용하기 .env

 

root 경로에 

.env 파일이 있고, 내용은 아래와 같을 때

VITE_APP_API_PREFIX=http://localhost:9000

 

vite.config.js 에서 위의 변수를 사용하려고 한다면

import { defineConfig } from 'vite';

// .env 파일에서 환경 변수 가져오기
const { VITE_APP_API_PREFIX } = import.meta.env;

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: VITE_APP_API_PREFIX

대부분 이렇게 쓰라고 나옵니다.

VITE_ 로 변수명을 정해야 합니다.

 

하지만 무슨 이유인지 모르겠는데, 저 환경변수를 못가져오는 경우가 있었습니다.

그럴때 해결 방법은 dotenv 를 직접 사용하면 됩니다.

 

설치

npm install dotenv --save-dev
또는
yarn add dotenv --dev

아래와 같이 사용.

import.meta.env 가 아니라 process.env

/* 생략 */

import dotenv from 'dotenv'
dotenv.config()

export default defineConfig({
    server: {
        proxy: {
            '/api': {
                target: process.env.VITE_APP_API_PREFIX,
                
/* 생략 */

 

 

참고

.env 파일에 변수가 있는데, 앱 실행 전에 export 로 환경변수를 바꾼다면

우선순위는 export 입니다.