vue 프로젝트 다 중 환경 설정(.env)의 실현

다 중 환경 설정 을 접 하지 않 았 을 때 기분 이 매우 높 았 고 진정 으로 조작 한 후에 느낌 도 그 랬 습 니 다.여기 서 자신 이 직면 한 문제 와 해결 방안 을 서술 하 겠 습 니 다.잘못된 점 이 있 으 면 여러분 의 지적 을 환영 합 니 다.
무엇이 다 환경 설정 입 니까?왜 다 환경 설정 을 해 야 합 니까?
가장 흔히 볼 수 있 는 다 중 환경 설정 은 바로 개발 환경 설정 과 생산 환경 설정(즉,온라인 설정)이다.많은 상황 에서 우리 가 개발 환경 에서 의 도 메 인 이름과 일부 설정 항목 은 우리 생산 모델 에서 의 것 과 다 르 기 때문에 이 럴 때 우 리 는 다 중 환경 설정 을 해 야 한다.그렇지 않 으 면 매번 에 데 이 터 를 바 꾸 는 것 이 얼마나 번 거 로 운 가.다른 상황 은 두 프로젝트 가 사용 하 는 코드 이지 만 마지막 에 각각 다른 가방 으로 싸 야 한 다 는 것 이다.그러면 이 럴 때 다 환경 설정 은 개발 효율 을 크게 향상 시 킬 수 있다.
.env 파일 을 어디 에 설정 합 니까?
.env 파일 은 프로젝트 의 루트 디 렉 터 리 에 패키지.json 과 같은 등급 으로 설정 되 어 있 습 니 다.다음 그림 과 같 습 니 다.

.env 파일 은 어떻게 설정 합 니까?몇 개 를 설정 합 니까?
.env 파일 의 이름 은 어떻게 됩 니까?
처음에 제 가 인터넷 에서 찾 아 봤 을 때 많은 블 로 거들 이 이름 을 지어 야 한다 고 했 어 요.
.env.development 개발 환경 에서 의 프로필
.env.production 생산 환경 에서 의 프로필
사실은 그렇지 않 습 니 다.만약 당신 이 개발 환경 과 생산 환경 을 설정 했다 면 이렇게 명명 하 는 것 은 크게 나 무 랄 것 이 없습니다.그러나 여러 프로젝트 의 공용 코드 라면 이렇게 명명 하 는 것 은 말 입 에 맞지 않 습 니 다.그래서 이 이름 형식 은 파일 의 시작 이'env'이면 됩 니 다.뒤의 이름 은 어떻게 하 든 좋 습 니 다.
.env 파일 설정
이것 이 바로 당신 이 원 하 는 것 을 배치 하 는 것 입 니 다.예 를 들 어 제 가 프로젝트 전체 에서 이름 을 얻 고 싶 으 면 바로.env 에서 설정 하면 됩 니 다.다음은 제 가 어떻게 값 을 얻 는 지 상세 하 게 설명 하 겠 습 니 다.
npm run serve 또는 npm run build 를 사용 할 때 기본 값 으로 갑 니 다.env 설정
그림:

//      VUE_APP_***          ok ，                 。
VUE_APP_NAME = '   '
VUE_APP_HTTPS = 'http://www.louhc.com/'
VUE_APP_ABBREVIATION = 'louhc'
VUE_APP_LOGO = 'louhc'

기본 적 인.env 파일 이 설정 되 어 있 으 면,우 리 는 다음 에 특수 한 필요 가 있 는.env 파일 을 설정 합 니 다.예 를 들 어 다른 환경 에서 다른 이름 을 사용 하고 싶 습 니 다.예 를 들 어 env.bsy 파일.bsy 는 제 가 마음대로 쓴 이름 입 니 다.사용자 정의 할 수 있 습 니 다.

//      VUE_APP_***          ok ，                 。
VUE_APP_NAME = '   '
VUE_APP_HTTPS = 'http://www.louhc.com:82/'
VUE_APP_ABBREVIATION = 'bsy'
VUE_APP_LOGO = 'bsy'

순서대로 유추 해서 몇 개 를 설정 하고 싶 으 세 요?
.env 파일 이 배 치 된 후에 우 리 는 실행 환경 을 설정 해 야 합 니 다.
어떻게 실행 환경 을 설정 합 니까?
package.json 파일 을 찾 았 습 니 다.다음 그림 입 니 다.

build:server:뒤에 있 는 이름 은 당신 이 마음대로 지은 이름 입 니 다.반드시 대응 해 야 실행 할 때 해당 하 는 설정 항목 을 찾 을 수 있 습 니 다.

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:bsy": "vue-cli-service build --mode bsy",
    "build:kthz": "vue-cli-service build --mode kthz",
    "serve:bsy": "vue-cli-service serve --mode bsy",
    "serve:kthz": "vue-cli-service serve --mode kthz",
  },

다시 한 번 말씀 드 리 지만:.env 는 기본 설정 항목 입 니 다.환경 설정 항목 을 실행 할 때 기본 설정 항목 과 실행 중인 환경 설정 항목 을 융합 시 킵 니 다.매개 변수 가 같은 상황 에서 환경 설정 항목 을 위주 로 합 니 다.쉽게 말 하면 기본 설정 항목 이 존재 하고 환경 설정 항목 도 존재 합 니 다.이 럴 때 어떤 환경 설정 항목 을 실행 합 니까?환경 설정 항목 의 값 을 기준 으로 기본 설정 항목 이 존재 하고 환경 설정 항목 이 존재 하지 않 으 면 환경 설정 항목 을 실행 할 때 도 기본 설정 항목 의 값 을 받 을 수 있 습 니 다.
전역 설정 항목 의 값 을 가 져 오 는 방법
예:어떻게 하면 js 에서 VUE 를 받 고 싶 어 요.APP_NAME='루 옌 양',그러면 이것 은 바로 당신 이 할당 하고 싶 은 곳 에 이 코드 를 쓰 면 process.env.VUEAPP_NAME

console.log(process.env.VUE_APP_NAME)//               bsy          

html 에서 전역 설정 항목 의 값 을 사용 하려 면 return 에서 값 을 부여 한 다음{{}}을 통 해 원 하 는 값 을 받 을 수 있 습 니 다.
어떻게 환경 을 운행 합 니까?
기본 환경 npm run serve 실행
지정 한 환경 npm run server:bsy 실행
기본 환경 패키지 npm run build
환경 패키지 지정 npm run build:bsy
다른 환경 이름 으로 전환 하면 됩 니 다.
vue 프로젝트 의 다 중 환경 설정(.env)실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 다 중 환경 설정 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!