vue - cli 3 webpack 다 중 생산 환경 설정.

우선, 실제 프로젝트 에서 여러 환경의 포장 을 설정 할 필요 가 없습니다. 서버 를 통 해 퍼 가기 하 는 것 이 더욱 안전 하고 크로스 도 메 인 문제 가 발생 하지 않 기 때 문 입 니 다. nginx, apache 든 docker 든 모두 태후 를 통 해 퍼 가기 할 수 있 습 니 다.전단 에 죽은 주 소 를 써 서 서로 다른 환경 을 요청 할 필요 가 없 지만 한 서버 에 여러 개의 전단 코드 를 전송 해 야 한다 면 키 워드 를 통 해 식별 한 다음 에 nginx 로 전송 하고 구체 적 으로 다음 글 을 통 해 전달 해 야 합 니 다.
\ # # 프로젝트 를 초기 화 할 때 보통 두 개의 버 전 development 과 production 만 있 습 니 다.어떻게 다시 포장 할 때 환경 을 구분 하여 각각 포장 합 니까?물론 주석 코드 를 사용 할 수 있 습 니 다. 발표 할 때마다 주석 을 달 고 주석 을 풀 어야 합 니 다. 매우 번 거 롭 습 니 다.
다음은 여러 생산 환경 을 어떻게 배치 하 는 지 소개 한다.쾌속 포장
프로젝트 를 초기 화 할 때 보통 두 가지 버 전이 있 습 니 다. 개발 환경 과 생산 환경 개발 환경 에서: NODEENV = development (기본) 생산 환경 에서: NODEENV = production (기본 값)
첫 번 째 설정 package. json
초기 화 는 이 렇 습 니 다.

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"

수정 후

"build：pro1": "vue-cli-service build --mode pro1",
"build：pro2": "vue-cli-service build --mode pro2",

다음 포장 할 때 npm run build: pro1 을 실행 하면 디 렉 터 리 에 있 는 env. pro 1 과 설정 한 변 수 를 읽 습 니 다.
두 번 째 단계 새 env. pro
방금 제 이 슨 이 새로운 build 두 개 를 정 의 했 기 때문에 디 렉 터 리 에 두 개의 파일 을 새로 만 들 려 고 합 니 다. env. pro 1 과 env. pro 2 두 개의 파일 을 만 들 려 고 합 니 다.

NODE_ENV = 'production'
VUE_APP_SERVER = '47'

파일 에서 NODE 를 다시 정의 할 수 있 습 니 다.ENV, VUE 를 새로 추가 할 수도 있 습 니 다.APP_SERVER, 이것 은 baseurl 을 설정 할 때 도 VUE 를 통 해 가능 합 니 다.APP_SERVER 는 어떤 환경 이 필요 한 지 판단 한다.
세 번 째 단 계 는 NODEENV 또는 VUEAPP_SERVER 환경 판단, buseUrl 재 정의

if (process.env.NODE_ENV == 'development') {
  baseUrl = 'VUE_APP_API_BASE106engine'
} else {
  if(process.env.VUE_APP_SERVER == 'pro1') {
    baseUrl = process.env.VUE_APP_API_BASE106!
  }else if(process.env.VUE_APP_SERVER == 'pro2') {
    baseUrl = process.env.VUE_APP_API_BASE47!
  }else if(process.env.VUE_APP_SERVER == 'pro3') {
    baseUrl = process.env.VUE_APP_API_BASE106engine!
  }else if(process.env.VUE_APP_SERVER == 'pro4') {
    baseUrl = process.env.VUE_APP_API_BASE106br!
  }
}

다음 npm run build: pro 1 해 보 세 요.