Vue 환경변수 파일(.env)

Vue-CLI3 로 버전이 올라가면서 main.js에서 전역변수 설정을 하지 못하게 막았다.

하지만 프로젝트를 진행하면서 전역변수를 생성해야 할 때가 존재한다.

그때 사용하는 것이 환경 변수 파일이다.

환경변수 파일은 프로젝트 root레벨에 생성해야 하고 파일명은 .env로 한다.

기본적으로 key=value형식이다.

// .env
VUE_APP_API_URL=http://localhost:3000

이렇게 생성 후 사용은 process.env.변수명으로 한다.

// api/index.js

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
});

Vue는 실행모드가 존재한다.

기본적으로 development(개발모드), production(배포모드)가 있다.

개발모드에서는 api를 localhost로 쓰고, 배포시 api를 'vue-til.com'으로 쓰려한다면 어떻게 해야할까?

답은 실행모드별로 .env파일을 생성하고 키는 동일하되, 값을 다르게 설정해주면 된다.

// .env.development
VUE_APP_API_URL=http://localhost:3000

// .env.production
VUE_APP_API_URL=https://vue-til.com

이렇게 되면 해당 환경변수를 사용하는 곳에서 실행모드 별로 다른 값이 매핑된다.

출처 : Vue.js 끝장내기 - 실무에 필요한 모든 것