Vue 환경변수

---

🌱 Vue 환경변수란?

정의

Vue 환경변수는 Vite 프로젝트에서 실행 환경별 값을 분리해서 사용하는 설정 값이다.

개발, 테스트, 운영 환경에 따라 API 주소나 설정 값을 다르게 넣을 때 사용한다.

🧩 기본 규칙

• 환경변수는 import.meta.env를 통해 접근한다.
• Vite에서 노출할 변수는 VITE_로 시작해야 한다.
• .env 파일은 프로젝트 루트에 둔다.

🛠️ .env 파일 생성

⚙️ 사용 예시

onMounted(() => {
  console.log(import.meta.env.VITE_TEST);
});

🧱 vite.config.js에서 사용할 때

vite.config.js에서 환경변수를 쓰려면 보통 파일 상단에서 먼저 꺼내서 사용한다.

const { VITE_URL } = import.meta.env;

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: VITE_URL,
        ws: true,
        changeOrigin: true,
      },
    },
  },
});

📁 환경변수 파일 구분

파일명	용도
.env	모든 환경에서 공통으로 사용
.env.<mode>	특정 모드에서만 사용
.env.local	로컬 전용 환경변수
.env.<mode>.local	특정 모드 + 로컬 전용

⚠️ 주의점

• VITE_ 접두사가 없으면 브라우저 코드에서 접근되지 않는다.
• 민감한 정보는 클라이언트에 노출되지 않도록 주의한다.
• 환경변수 변경 후에는 개발 서버를 다시 시작해야 할 수 있다.

📌 정리

• Vue 환경변수는 Vite 기반 프로젝트에서 환경별 설정을 나눠 쓰는 방식이다.
• import.meta.env와 VITE_ 규칙을 먼저 기억하면 된다.
• API 주소나 프록시 설정과 함께 자주 사용된다.

---

연결문서

• vite
• Vuejs
• Vue-routing