Vue CLI 3.X 부터 적용되는 내용
지난포스팅에서 .env파일에 Vue Cli 3부터 제공되는 VUE_APP_ 접두사를 활용하여 환경변수를 설정
로컬호스트 3000번으로 설정해준 상태이지만
실무에선 Public한 도메인에 오픈되기 때문에 배포하게되면 맞지 않게 된다.
프로토타이핑시엔 http://localhost:3000/ 을쓰고
서버배포시 들어갈때 아래의 도메인.com 으로 사용하게됨.
이와같이 배포용과 개발용 매번환경변수들을 따로 관리하게되는데
아래의 예 처럼 키를 따로 분리하여 관리하는것이 아닌 Vue CLI에서 제공하는 방법으로 설정해주면 편리하다.
예시 (X)
VUE_APP_API_URL_DEPLOYMENT = https://vue-til.com/
VUE_APP_API_URL = http://localhost:3000/.env파일과 마찬가지로 프로젝트 루트에 .env.development 파일생성
.env 파일보다 .env.development 파일이 최 우선순위로 설정됨
.env / .env.development / .env.production 가 제공됨.
.env.development 은 개발시에 띄울 로컬서버(호스트),
.env.production 은 npm run build 에 적용된 production모드이고
.env 에는 위의 개발모드와 프로덕션모드가 없을때 공통으로 들어갈 변수를 설정해주는 기본 파일이다.
설정파일을 변경했을땐 서버 재실행이 필요함.
반응형
'UXUI Development > Vue.js' 카테고리의 다른 글
| [vuex] Vuex (Store) (0) | 2022.01.03 |
|---|---|
| [Vue] dependencies / devDependencies 차이 (0) | 2022.01.03 |
| [Vue] 컴포넌트 간 데이터전달 방법 3가지 - eventBus, Store(vuex) (0) | 2022.01.03 |
| [vue-router] vue router (Programmatic Navigation), router.push (0) | 2021.12.29 |
| [Vue] vue 환경변수 - .env 파일과 환경변수 설정방법 (0) | 2021.12.28 |
| [Vue] API 설정 공통화_ axios.create() (0) | 2021.12.28 |
| [Vue] API폴더 구조화 (axios) (0) | 2021.12.23 |
| [vue-router] 없는 페이지를 접근할 때의 라우터 처리 (라우터의 폴백기능) (0) | 2021.12.23 |