0songha0

Vue 환경변수 사용 방법 / 서버벌 env 분리 설정

Vue 환경변수 설정

서버별 env 파일 분리

.env 모든 모드에서 공통으로 사용되는 env 파일입니다.
특정 모드 env 파일이 적용되면, 기본 env 파일 값을 덮어쓰며 병합됩니다.
.env.local 로컬에서 사용되는 env 파일입니다.

*.local 파일은 git에서 제외됩니다.
.env.[mode] 실행 모드에 따라 적용되는 env 파일입니다.

mode 예시 : development, staging, production

프로젝트 루트 경로에 실행 모드별 .env 파일들을 생성하고 환경변수를 작성하면 됩니다.

env 파일 환경변수 작성 예시

VITE_APP_API_URL=http://localhost:5000

VITE_SOCKET_URL=http://127.0.0.1:8082

VITE에서 환경변수를 읽기 위해서는, 환경변수 앞에 프리픽스로 ‘VITE_‘가 붙어야 합니다.

env prefix 변경 방법

export default defineConfig({
  plugins: [vue()],
  envPrefix: '변경값',
  resolve: {
      alias: {
        '@': fileURLToPath(new URL("./src", import.meta.url)),
      }
    }
});

프로젝트 루트 경로 vite.config.js 파일에서 환경변수 프리픽스 값을 변경할 수 있습니다.
접두사를 없애면 모든 환경변수를 노출시켜서 보안상 위험할 수 있습니다.

Vue 환경변수 사용법

env 환경변수 import

const 변수명 = import.meta.env.환경변수명;

Vue 애플리케이션 빌드 도구가 Vite인 경우 사용할 수 있는 방법입니다.

Vite 기본 환경 변수 사용

console.log(import.meta.env.MODE); // 현재 모드 출력 (기본값 : 개발 development, 운영 production)
console.log(import.meta.env.BASE_URL); // 프로젝트 베이스 URL
console.log(import.meta.env.PROD); // 현재 운영 모드인 경우 true
console.log(import.meta.env.DEV); // 현재 개발 모드인 경우 true

env 파일에 설정하지 않아도 사용할 수 있는 기본 환경 변수들입니다.

Vite 설정파일에서 env 모드 접근 방법

export default defineConfig(({ mode }) => {
  const isDevelopment = mode === "development";
  console.log('현재 개발 모드 : ', isDevelopment);

  return {
    plugins: { vue() },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL("./src", import.meta.url)),
      }
    }
  }
});

프로젝트 루트 경로 vite.config.js 파일에서 현재 실행 모드를 확인하고 분기처리 할 수 있습니다.

최신 글