Vue에서 환경 변수 사용하기

이번 포스팅에서는 환경변수 사용하는 법을 확인해본다. 

 

vue와 vuetify 버전은 다음과 같다.

"vue": "^2.6.11",
"vuetify": "^2.2.11"

 

여기서 언급되는 환경변수는 리눅스나 윈도우의 환경변수랑은 다른 Vue용 환경변수를 말하는 것임을 유의한다.

 

 

.env 생성

Vue에서 환경 변수를 사용하기 위해서는 아래와 같은 .env 폴더들을 프로젝트 아래에 만들어야한다.

 

바로 요기

.env 폴더가 기본이고, 환경에 따라 .development, .production 등을 붙일 수 있다. 공통적으로 쓰는 것들은 env에, 개발용으로 사용할 것들은 development에 넣는 식으로 분리하면 되겠다.

 

.env : development, production 등 모든 환경에 사용되는 환경 변수

.env.local: 로컬 환경에서 사용할 환경변수. 여기에 들어가는 환경 변수는 git에 안올라간다.

.env.development: development환경에서 사용할 환경 변수. npm run serve를 별다른 옵션없이 사용하면 development 환경을 인식하기 때문에 이 환경변수를 사용한다.

.env.production: production환경에서 사용할 환경 변수. --mode production으로 production 모드를 사용할 경우 development대신 이 환경변수가 사용된다.

 

env 증식

환경 변수 입력하기

사용자 정의 환경 변수를 입력할 때는 반드시 VUE_APP_{아무 값} 같은 형태로 환경변수를 입력해야 한다. 

 

아래와 같이 입력해본다.

.env

VUE_APP_ALL=_ENV
NO_VUE_APP_ALL=ENV

.env.development

VUE_APP_DEV=_ENV_DEVELOPMENT

.env.local.production

VUE_APP_LOCAL=_ENV_LOCAL

.env.production

VUE_APP_PROD=_ENV_PRODUCTION

 

환경 변수 테스트하기

환경 변수를 테스트할땐 저장만해서는 runtime 중에 반영이 안되고, npm run serve같은 명령어로 다시 실행해야 정상 반영된다.

 

위의 코드를 확인하기 위해서 간단한 버튼 한개를 App.vue의 v-main아래에 입력한다.

click하면 printenv 함수가 동작한다고 명시한다.

    <v-main>
      <v-btn @click="printenv">ENV LOG PRINT</v-btn>

 

App.vue의 method로 printenv를 작성한다.

동작은 간단하게 process.env를 로그로 출력한다.

export default {
  name: 'App',

  components: {
  },

  data: () => ({
    files: [],
  }),

  methods: {
    printenv (){
      console.log(process.env)
    },

 

npm run serve로 vue를 구동시킨 후 버튼을 클릭한다.

ENV LOG PRINT 버튼을 클릭한다.

F12로 개발자 도구를 열어 로그를 확인해보면 아래와 같이 출력된 것을 알 수 있다.

출력된 환경 변수

VUE_APP_ALL=_ENV
NO_VUE_APP_ALL=ENV

VUE_APP_DEV=_ENV_DEVELOPMENT

VUE_APP_LOCAL=_ENV_LOCAL

VUE_APP_PROD=_ENV_PRODUCTION

 

여러 파일들에 위의 5개 환경변수를 입력했는데 실제로 출력된 것은 VUE_APP_ALL=_ENV, VUE_APP_DEV=_ENV_DEVELOPMENT, VUE_APP_LOCAL=_ENV_LOCAL 3가지다. 

 

NO_VUE_APP_ALL는 VUE_APP으로 시작하지 않았기 때문에,

VUE_APP_PROD는 현재 모드가 development라서 출력되지 않은 것을 알 수 있다.

 

필요에 다라 위의 과정처럼 환경변수를 생성해서 사용하자.