[vue3, type script] 테스트 서버와 운영서버, 로컬서버에 따라 화면에 표기 하는 방법(window.location.hostname)

똘켓Dec 4, 2025

VUE3 + TYPESCRIPT + PINIA 로 FRONTEND 화면을 개발하였는데, 이게 운영서버인지, 개발서버인지 구분이 잘안되서, 표기를 남기고 싶은데… 최상단에 회사 로그 이미지가 있어.. 그 옆에다가 빨간색 글씨로 “개발서버”라고 표기하고 싶은데….

아주 간단하게 현재 실행 중인 환경(dev / prod)을 화면에 표시할 수 있어.
Vue 3 + TypeScript + Pinia 환경이라면 보통 import.meta.env로 환경을 구분해.

아래처럼 하면 돼:

1. `.env` 파일 설정

`.env.development`

VITE_APP_ENV=development

`.env.production`

VITE_APP_ENV=production

2. GlobalNavigation.vue 에 표시하기

GlobalNavigation.vue (템플릿 + 스타일만 참고)

<template>
  <nav class="global-nav">
    <img src="@/assets/logo.png" alt="logo" class="logo" />

    <!-- 👇 환경 표시 -->
    <span v-if="isDev" class="env-label">개발서버</span>
  </nav>
</template>

<script setup lang="ts">
const isDev = import.meta.env.VITE_APP_ENV === 'development'
</script>

<style scoped>
.env-label {
  color: red;
  font-size: 14px;
  font-weight: bold;
  margin-left: 10px;
}
</style>

3. 진짜 운영에서는 “개발서버”가 절대 나오지 않음

pnpm run dev → development
pnpm run build → production

빌드하면 자동으로 .env.production이 적용되니까
운영에서는 <span>개발서버</span> 표시가 안 나와.

옵션: 운영이면 “운영서버”라고 표시할 수도 있음

원하면 아래처럼도 가능:

<span v-if="env === 'development'" class="env-label dev">개발서버</span>
<span v-else class="env-label prod">운영서버</span>

const env = import.meta.env.VITE_APP_ENV

.env-label.dev { color: red; }
.env-label.prod { color: blue; }

다른 방법은 없어?

`.env` 말고도 여러 방식으로 운영/개발 여부를 구분해서 화면에 표기할 수 있어.
아래에서 가장 많이 쓰는 “다른 방법들”을 정리해줄게.

방법 1 — `import.meta.env.MODE` 바로 사용 (가장 간단)

.env 파일을 아예 안 건드리고 바로 사용 가능.

<script setup lang="ts">
const isDev = import.meta.env.MODE === 'development'
</script>

<template>
  <span v-if="isDev" style="color:red; margin-left: 10px; font-weight:bold;">
    개발서버
  </span>
</template>

장점: 추가파일 필요 없음
단점: 운영/개발 구분만 가능 (스테이징 같은 환경은 구분 어려움)

방법 2 — Pinia 스토어에 환경값 저장

예를 들어 서버에서 초기 설정(config API)을 불러오고,
그 안에 환경 정보(envType: "DEV" | "PROD" 등)가 있다면…

1) store/config.ts

import { defineStore } from 'pinia'

export const useConfigStore = defineStore('config', {
  state: () => ({
    envType: '' as 'DEV' | 'PROD' | '',
  })
})

2) App 실행 시 API 호출 후 값 저장

const configStore = useConfigStore()
configStore.envType = serverResponse.envType

3) GlobalNavigation.vue

<script setup lang="ts">
import { useConfigStore } from '@/stores/config'
const config = useConfigStore()
</script>

<template>
  <span v-if="config.envType === 'DEV'" class="env-label">개발서버</span>
</template>

<style scoped>
.env-label {
  color: red;
  font-weight: bold;
  margin-left: 10px;
}
</style>

장점: 백엔드에서 환경값 제어 가능
단점: API가 먼저 불려야 표시됨

방법 3 — 빌드 시 `package.json` 에서 버전/환경 삽입

Vite의 define 사용

vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    __APP_ENV__: JSON.stringify(process.env.NODE_ENV),
  },
})

Navigation.vue

<script setup lang="ts">
declare const __APP_ENV__: string
const isDev = __APP_ENV__ === 'development'
</script>

<template>
  <span v-if="isDev" style="color:red;margin-left:10px;font-weight:bold;">
    개발서버
  </span>
</template>

장점: 환경값이 JS 번들에 고정 → 빠르다
단점: 코드 수정해서 빌드해야 변경됨

방법 4 — 서버에서 제공한 HTML Meta 태그로 구분

(운영/개발 서버 nginx 설정만 바꿔도 됨)

index.html

<meta name="app-env" content="%VITE_APP_ENV%">

운영 nginx:

    sub_filter "%VITE_APP_ENV%" "prod";

개발 nginx:

    sub_filter "%VITE_APP_ENV%" "dev";

Navigation.vue

<script setup lang="ts">
const metaEnv = document.querySelector('meta[name="app-env"]')?.getAttribute('content')
</script>

<template>
  <span v-if="metaEnv === 'dev'" style="color:red;margin-left:10px;font-weight:bold;">
    개발서버
  </span>
</template>

장점: 프론트 빌드 파일은 동일하게 배포 가능
단점: 서버 설정 필요

운영 서버에는 “개발서버” 절대 표시되지 않아.
왜냐하면 운영에서 import.meta.env.MODE 값은 무조건 production 이기 때문이야.

✔ 개발 실행(`npm run dev`, `vite`)

import.meta.env.MODE === "development"

→ isDev = true
→ “개발서버” 표시됨

✔ 운영 빌드(`npm run build`) 후 배포

import.meta.env.MODE === "production"

→ isDev = false
→ 아무것도 표시 안됨

글씨 크기 키워줘

글씨 크기만 키우고 싶다면 `font-size` 값만 크게 바꾸면 돼!
예를 들어 20px 정도로 키우는 예시는 아래처럼 작성할 수 있어:

<template>
  <span 
    v-if="isDev" 
    style="color:red; margin-left: 10px; font-weight:bold; font-size:20px;"
  >
    개발서버
  </span>
</template>

더 크게 원하면 24px, 28px, 32px 등 원하는 숫자로 넣어줘도 돼.

조금 더 깔끔하게 CSS 분리한 버전

<template>
  <span v-if="isDev" class="dev-label">개발서버</span>
</template>

<style scoped>
.dev-label {
  color: red;
  font-weight: bold;
  font-size: 22px;   /* ← 여기서 원하는 크기로 조절 */
  margin-left: 10px;
}
</style>

태두리 라운드

라운드 테두리(rounded border)를 넣고 싶다면 `border`, `border-radius`, `padding` 정도만 추가하면 깔끔하게 보인다!

아래처럼 적용해봐

라운드 테두리 스타일 적용 버전

<template>
  <span v-if="isDev" class="dev-label">개발서버</span>
</template>

<style scoped>
.dev-label {
  color: red;
  font-weight: bold;
  font-size: 20px;
  margin-left: 10px;

  /* 🔥 라운드 테두리 */
  border: 2px solid red;
  border-radius: 8px;
  padding: 2px 8px;
}
</style>

조금 더 부드러운 라운드 원하면?

border-radius: 12px;

또는 pill 형태(완전 둥글게):

border-radius: 9999px;

localhost일때는?

localhost 일 때도 “개발서버”로 표시하고 싶다면,
호스트 네임을 직접 체크하는 방법을 같이 쓰면 돼.

즉,

Vite dev 모드(development)
또는 URL이 localhost, 127.0.0.1
이면 개발서버 표시!

localhost 포함한 완전체 코드

<script setup lang="ts">
const mode = import.meta.env.MODE

// 🔥 개발 환경 조건
const isDev =
  mode === 'development' ||
  window.location.hostname === 'localhost' ||
  window.location.hostname === '127.0.0.1'
</script>

<template>
  <span 
    v-if="isDev" 
    class="dev-label"
  >
    개발서버
  </span>
</template>

<style scoped>
.dev-label {
  color: red;
  font-weight: bold;
  font-size: 20px;
  border: 2px solid red;
  border-radius: 8px;
  padding: 2px 8px;
  margin-left: 10px;
}
</style>

✔ 동작 예시

실행 환경	hostname	결과
`npm run dev`	localhost	개발서버 표시
`npm run dev`	127.0.0.1	개발서버 표시
운영 배포 환경	production	표시 안 됨
운영 배포 환경	IP 또는 도메인	표시 안 됨

원하면

스테이징(stg, qa)
데모 환경
같이 구분해서 다른 색으로 표시해줄 수도 있어!

개발(로컬)과 dev 서버를 구분해서 표시

예:

localhost 또는 127.0.0.1 → “LOCALHOST”
개발 서버(dev) → “개발서버”
운영(prod) → 표시 안함

아래처럼 딱 맞게 구현하면 돼.

완성 코드 — localhost 별도 표기

<script setup lang="ts">
const mode = import.meta.env.MODE
const host = window.location.hostname

// LOCALHOST 환경
const isLocal =
  host === 'localhost' || host === '127.0.0.1'

// 개발서버 (dev 모드지만 localhost는 제외)
const isDev = !isLocal && mode === 'development'
</script>

<template>
  <!-- LOCALHOST 표기 -->
  <span 
    v-if="isLocal" 
    class="env-label local"
  >
    LOCALHOST
  </span>

  <!-- 개발서버 표기 -->
  <span 
    v-else-if="isDev" 
    class="env-label dev"
  >
    개발서버
  </span>
</template>

<style scoped>
.env-label {
  font-weight: bold;
  font-size: 20px;
  padding: 2px 8px;
  margin-left: 10px;
  border-radius: 8px;
  border: 2px solid;
}

/* localhost 스타일 */
.local {
  color: #0070f3;
  border-color: #0070f3;
}

/* 개발서버 스타일 */
.dev {
  color: red;
  border-color: red;
}
</style>

동작 정리

환경	hostname	MODE	표시
로컬 개발	localhost	development	LOCALHOST
로컬 개발	127.0.0.1	development	LOCALHOST
개발 서버(dev)	dev.company.com	development	개발서버
운영 서버(prod)	prod.company.com	production	(표시 없음)

`<span>` 구조는 그대로 두고 표시되는 텍스트만 상황에 따라 바꾸면 방법

즉,

localhost → “LOCALHOST”
개발서버(dev) → “개발서버”
운영(prod) → 표시 안함

이렇게 한 개의 <span> 으로 깔끔하게 처리 가능!

가장 간단한 방식 (한 개의 span + 텍스트만 변경)

<script setup lang="ts">
const mode = import.meta.env.MODE
const host = window.location.hostname

let title = ''

if (host === 'localhost' || host === '127.0.0.1') {
  title = 'LOCALHOST'
} else if (mode === 'development') {
  title = '개발서버'
}
</script>

<template>
  <span 
    v-if="title"
    class="env-label"
  >
    {{ title }}
  </span>
</template>

<style scoped>
.env-label {
  color: red;
  font-weight: bold;
  font-size: 20px;
  border: 2px solid red;
  border-radius: 8px;
  padding: 2px 8px;
  margin-left: 10px;
}
</style>

이렇게 동작함

환경	결과
localhost	LOCALHOST
127.0.0.1	LOCALHOST
dev 서버 (개발 배포)	개발서버
운영 서버	표시 없음

로컬에서는 표기되는걸 확인했는데, 테스트 서버에 배포해보니 표기가 되지않아

테스트 서버에서 표기가 안 되는 이유는 거의 100% 아래 중 하나야.

원인 1 — 테스트 서버에서 MODE가 `production`이기 때문

Vite는 **빌드하면 무조건 MODE = “production”**이야.
즉, 테스트 서버에 올릴 때는 이렇게 됨:

import.meta.env.MODE === 'development' → false

그래서 “개발서버”가 표시되지 않는 거야.

현재 조건:

else if (mode === 'development') {
  title = '개발서버'
}

👉 테스트 서버는 빌드 파일이라 MODE = “production”
👉 따라서 title = “”
👉 span 안 보여!

원인 2 — hostname 체크 조건도 걸리지 않음

if (host === 'localhost' || host === '127.0.0.1')

테스트 서버 도메인은 대부분 이렇게 생겼을 거야:

test.xxx.com
dev.xxx.com
stg.xxx.com

즉, hostname 조건도 만족 안 됨 → 아무 것도 표시 안 됨.

해결 방법: 테스트 서버 hostname 기준으로 판별해주기

예를 들어 테스트 서버 주소가:

test.mycompany.com
stg.mycompany.com
dev.mycompany.com

이라면 hostname으로 구분하면 해결돼.

수정된 최종 코드 (테스트 서버 포함)

<script setup lang="ts">
const mode = import.meta.env.MODE
const host = window.location.hostname

let title = ''

// LOCALHOST
if (host === 'localhost' || host === '127.0.0.1') {
  title = 'LOCALHOST'

// 테스트 / 개발 서버 (hostname에 dev, test 포함)
} else if (host.includes('dev') || host.includes('test') || host.includes('stg')) {
  title = '개발서버'

// 또는 MODE === "development" 추가
} else if (mode === 'development') {
  title = '개발서버'
}
</script>

추천 패턴: hostname 기반

대부분 회사는 아래처럼 함:

환경	hostname 예시	표기
로컬	localhost	LOCALHOST
개발 서버	dev.hostname.com	개발서버
테스트 서버	test.hostname.com	개발서버
스테이징	stg.hostname.com	STAGING
운영	www.hostname.com	없음

Hi, I’m 똘켓

All My Articles

1. .env 파일 설정

.env.development

.env.production

2. GlobalNavigation.vue 에 표시하기

3. 진짜 운영에서는 “개발서버”가 절대 나오지 않음

옵션: 운영이면 “운영서버”라고 표시할 수도 있음

.env 말고도 여러 방식으로 운영/개발 여부를 구분해서 화면에 표기할 수 있어.아래에서 가장 많이 쓰는 “다른 방법들”을 정리해줄게.

방법 1 — import.meta.env.MODE 바로 사용 (가장 간단)

방법 2 — Pinia 스토어에 환경값 저장

1) store/config.ts

2) App 실행 시 API 호출 후 값 저장

3) GlobalNavigation.vue

방법 3 — 빌드 시 package.json 에서 버전/환경 삽입

vite.config.ts

Navigation.vue

방법 4 — 서버에서 제공한 HTML Meta 태그로 구분

index.html

Navigation.vue

✔ 개발 실행(npm run dev, vite)

✔ 운영 빌드(npm run build) 후 배포

글씨 크기 키워줘

글씨 크기만 키우고 싶다면 font-size 값만 크게 바꾸면 돼!예를 들어 20px 정도로 키우는 예시는 아래처럼 작성할 수 있어:

조금 더 깔끔하게 CSS 분리한 버전

라운드 테두리(rounded border)를 넣고 싶다면 border, border-radius, padding 정도만 추가하면 깔끔하게 보인다!

라운드 테두리 스타일 적용 버전

조금 더 부드러운 라운드 원하면?

localhost일때는?

localhost 포함한 완전체 코드

✔ 동작 예시

개발(로컬)과 dev 서버를 구분해서 표시

완성 코드 — localhost 별도 표기

동작 정리

<span> 구조는 그대로 두고 표시되는 텍스트만 상황에 따라 바꾸면 방법

가장 간단한 방식 (한 개의 span + 텍스트만 변경)

이렇게 동작함

원인 1 — 테스트 서버에서 MODE가 production이기 때문

원인 2 — hostname 체크 조건도 걸리지 않음

해결 방법: 테스트 서버 hostname 기준으로 판별해주기

수정된 최종 코드 (테스트 서버 포함)

추천 패턴: hostname 기반

Hi, I’m 똘켓

Related Posts

[vue3, type script] const 함수 생성 및 함수 결과값 리턴 방법

[Tailwind CSS] Vue3 백엔드 서버에서 리턴 메세지 값으로 줄바꿈(\r\n, \n)값으로 리턴해줄때 화면에서도 줄바꿈 처리 하는 방법 3가지 (by ChatGpt)

[SpringBoot] 프로젝트가 여러개일때, 공통 호출 로직에 대한 프로젝트 분리 및 JAR파일로 의존성 추가 하는 방법 3가지

프로그래밍

정보의 공유 사회

1. `.env` 파일 설정

`.env.development`

`.env.production`

`.env` 말고도 여러 방식으로 운영/개발 여부를 구분해서 화면에 표기할 수 있어.
아래에서 가장 많이 쓰는 “다른 방법들”을 정리해줄게.

방법 1 — `import.meta.env.MODE` 바로 사용 (가장 간단)

방법 3 — 빌드 시 `package.json` 에서 버전/환경 삽입

✔ 개발 실행(`npm run dev`, `vite`)

✔ 운영 빌드(`npm run build`) 후 배포

글씨 크기만 키우고 싶다면 `font-size` 값만 크게 바꾸면 돼!
예를 들어 20px 정도로 키우는 예시는 아래처럼 작성할 수 있어:

라운드 테두리(rounded border)를 넣고 싶다면 `border`, `border-radius`, `padding` 정도만 추가하면 깔끔하게 보인다!

`<span>` 구조는 그대로 두고 표시되는 텍스트만 상황에 따라 바꾸면 방법

원인 1 — 테스트 서버에서 MODE가 `production`이기 때문