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 끝장내기 - 실무에 필요한 모든 것
Author And Source
이 문제에 관하여(Vue 환경변수 파일(.env)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@developerjune/Vue-환경변수-파일.env저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)