[Vue] import.meta.env.MODE 값 설정하기

개발환경

---

• 현재 개발중인 환경은 아래와 같다

  • front framework: vue3 (v3.2.13)
  • build tool: vite (v3.1.9)

 

상황

---

개발을 하다보면 local, dev, prod 와 같은 개발환경에 따라 다른 처리가 필요한 부분이 꼭 생기게 된다.

vue3, vite 를 사용하여 개발하는 지금, 이러한 처리가 필요한 부분이 발생하여 해당 환경에 맞게 처리 후

테스트 할 환경으로 빌드를 하기 위해 아래와 같이 빌드를 실행하였다.

   npm run build --mode local

정상적으로 진행 될 거라 생각했지만 아래와 같은 오류가 발생하였다.

   Error: "local" cannot be used as a mode name because it conflicts with the .local postfix for .env files.

내용을 찾아보니 .local 이라는 접미사(postfix) 를 환경변수 파일 (.env) 의 이름으로 사용하고 있기 떄문에 충돌이 난다 라는 것이었다.

 

해결

---

먼저 결론부터 얘기하자면 local 이라는 환경 대신 local-dev 와 같은 값으로 변경해서 사용하면 된다.

간단히 두 단계로 설명하자면..........

 

• package.json 수정

  package.json 의 scripts 내 구문을 아래와 같이 수정한다.

    {
      "name": "example-vue3",
      ....
      "scripts": {
        "dev": "vite",
        "build_dev": "vite build --mode dev",
        "build_prod": "vite build --mode production",
        "build": "vite build --mode local-dev"
      }
    }
    ....

  build 구분의 뒤에 --mode local-dev 로 환경변수의 값을 설정해준다. (local-dev 가 아닌 본인이 원하는 값으로 해도 된다.)

 

• build 후 확인

  아래의 명령어를 통해 build 후 환경변수 값을 확인한다.

    npm run build

  -> 브라우저에 접속하여 import.meta.env.MODE 변수를 통해 현재 개발환경 모드를 확인한다.

    console.log(`mode: ${import.meta.env.MODE}`)

  local-dev 라는 값을 확인 할 수 있을 것이다.

 

왜?

---

위의 오류에 대해 설명하기 전에.. 먼저 vite 의 실행과정에 대해 알아보자면..

vite 는 시작 시 .env 파일을 찾아 로드한다고 한다.

보통 vite 로 개발 시 서버실행을 위해서는 npm run dev 를 입력하여 실행하게 되는데 이 내용은 기본적으로 package.json 에 있는 작성된 스크립트를 실행시킨다.

만약 package.json 이 위에 작성 된 것 처럼 설정되어있을 시

npm run dev 는 그냥 vite 라는 커맨드를 실행 시키게 될 것이고

npm run build 는 vite build --mode local-dev 라는 커맨드를 실행시키게 되는 것이다.

이와 같이, vite build 뒤에는 --mode [environment] 를 추가할 수 있는데 이렇게 임의로 environment 를 설정하여 build 시에는 .env.[environment] 와 같은 해당 environment 파일을 찾으려 한다고 한다.

해당 내용으로 vite 공식 사이트에서는 아래와 같이 설명하고 있다.

  .env                # loaded in all cases
  .env.local          # loaded in all cases, ignored by git
  .env.[mode]         # only loaded in specified mode
  .env.[mode].local   # only loaded in specified mode, ignored by git

이 때, .env.local 이라는 파일이 이미 사용중이라 충돌이 나기 때문에 해당 이름으로는 사용 할 수 없다고 하는 것이다. (아니 근데 대체 어디서 사용중인지는 아직...)

그렇다면 .env 상황이 없는 상태에서는 어떨까?

.env 파일이 없는 상황에서의 별도로 설정된 기본값이 있으며 해당 값은 아래와 같다.

 

• npm run dev -> development

• npm run build -> production

 

결론은.. 저~ 위에 package.json 처럼 작성 되었을 경우 실행 커맨드에 따른 import.meta.env.MODE 값은 아래와 같다.

npm run dev -> development (+애플리케이션을 개발모드로 실행한다)

npm run build_dev -> dev

npm run build_prod -> production

npm run build -> local-dev

 

참고로, 위 설정은 build_dev, build_prod 시에는 번들링하여 빌드된 파일을 생성하는 용도 이므로... 만약 직접 해당 실행환경으로 서버를 띄워서 확인 하고 싶다면 build 명령어를 빼면 된다.

아래처럼 ...

   ...
   scripts: {
     ...
     "build_dev": "vite --mode dev",
     "build_prod": "vite --mode production",
     ...
   }

 

p.s 개인적으로 본문의 내용을 잊지 않기 위해 기록할 겸 글로 작성해봤는데... 작성하면서도 왜??, 어떻게..?? 하는 부분이 개인적으로도 많이 있는 것 같다.

예를들면 --mode local 로 사용 할 수 있을 것 같고... 또 대체 .env.local 파일을 어떤 시스템에서 어떻게 사용중이길래 안된다는 건지 등...

시간이 될 때 더 찾아보고 보강을 해야 할 것 같다.