Vue 환경마다 다른 env 파일 사용하기 (title 변경)

vue vite 프로젝트에서 .env

.env 환경변수 선언 방법

VITE_APP_이름=값

VITE_APP_API_URL=https://api.url

.env 환경변수 사용 방법

import.meta.env.환경변수이름

import.meta.env.VITE_APP_API_URL

1. 프로젝트 최상단에 .env 파일을 만들고 환경변수를 작성해준다.

# .env.development
VITE_APP_TITLE_NAME=나는 development

# .env.development.local
VITE_APP_TITLE_NAME=나는 development local

# .env.production
VITE_APP_TITLE_NAME=나는 production

2. package.json의 scripts에 어떤 .env파일을 사용할지 지정한다.

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite --port 3002", // .env.development.local 적용
    "dev-build": "vite build --mode development", // .env.development 적용
    "build": "vite build --mode production", // .env.production 적용
    "preview": "vite preview"
  },
  "dependencies": {
	.
    .
    .
  },
  "devDependencies": {
	.
    .
    .
  }
}

위와 같이 적용하면 환경마다 다른 .env파일을 사용할 수 있다.

3. 환경마다 다른 title 사용하기

main.js

import App from "./App.vue";
import { createApp } from "vue";

const app = createApp(App);


app.mount("#app");

// title 적용
document.title = import.meta.env.VITE_APP_TITLE_NAME;