Vuejs - env파일

.env 파일

• 외부 파일(.env)에 환경 변수를 정의하여 변수로 받아오기 위함.
• 보안과 유지보수에 용이하다.
• 프로젝트의 최상위 루트에 존재해야한다.

왜 사용하는가?

• 포트, DB정보, API_KEY처럼 오픈소스에 올리면 안되는 값이 있다.
• 이때 필요한 것이 dotenv 패키지. 환경 변수 파일을 외부에 만들어 URL, 포트, API_KEY 등을 소스내에 하드 코딩하지 않아도 된다.

.env 파일 사용법

• .env.{mode명}
• 내용을 수정하면 npm으로 다시 시작해야한다.

  vue-cli 2.x까지는 .env파일을 애플리케이션 소스코드에서 들고오려면 웹팩의 DefinePlugin을 사용해줘야했다.
  vue-cli 3.X 부턴 사용자 편리를 위해 자체로 규칙을 제공하는데, VUE_APP_접두사가 붙은 변수는 자동 로드 된다.

.env 활용 모듈 - dotenv

• nodeJS의 모듈로, npm을 사용해 설치하고 사용할 수 있다.
• dotenv를 사용해 현재 디렉토리에 위치한 .env 파일로부터 환경변수를 읽어낼 수 있다.
• npm install dotenv

require("dotenv").config();

• 애플리케이션이 작동될 때 가장 먼저 실행되는 js 파일의 최상단에서 config() 함수를 호출하면 .env 파일에 저장된 환경 변수를 process.env 모듈을 통해 불러올 수 있다.
  (무슨말이지)

참고

https://velog.io/@hoho_0815/env-%ED%8C%8C%EC%9D%BC%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC
https://kang-ji.tistory.com/241