다 중 페이지 vue 에 적용 되 는 단일 페이지 포장 방법(포장 모드 포함)

프로필
여러 페이지 vue 응용 을 어떻게 구축 하 는 지,그리고 왜 구축 해 야 하 는 지 에 대해 저 희 는 지난 글 에서 소 개 했 습 니 다.관심 이 있 는 것 은 여러 페이지 vue 응용 을 참고 하 십시오.본 고 에서 우리 가 소개 하고 자 하 는 것 은 한 페이지 의 응용 에 대해 그 중의 한 페이지(또는 몇 개)를 어떻게 단독으로 포장 하 는 지 하 는 것 이다.
일반적으로 여러 페이지 의 응용 은 하나의 페이지 를 포장 할 필요 가 없다.이 여러 페이지 는 전체 응용 으로 정적 자원 서버 에 직접 놓 을 수 있다.그러나 여러 페이지 에 적용 되 는 모든 페이지 가 다른 서버 에 놓 여 있 을 수도 있다 고 했 습 니 다.이 럴 때 모든 서버 에 완전한 자원 팩 을 설치 하면 너무 비대 해 보일 수 있 습 니 다.그래서 우 리 는 어떤 페이지 를 따로 포장 해 야 할 지도 모른다.
물론 포장 할 때마다 vue.config.js 의 pages 필드 에 있 는 관련 이 없 는 페이지 를 직접 삭제 하 는 뚜렷 한 방법 이 있 습 니 다.예 를 들 어:

module.exports = {
 pages: {
  page1: {...},
  // page2: {...},
  // page3: {...}
 }
}

분명히 이렇게 포장 한 결 과 는 페이지 1 페이지 밖 에 없 었 다.
하지만 포장 할 때마다 프로필 을 삭제 하 는 것 은 우아 한 방법 이 아니다.우리 에 게 필요 한 방안 은 여러 개의 포장 명령 이 있 습 니 다.해당 하 는 포장 명령 을 실행 하면 해당 하 는 페이지 를 포장 할 수 있 습 니 다.그러면 우 리 는 더 이상 설정 파일 을 바 꾸 지 않 을 수 있 습 니 다.다음은 이런 방법 을 소개 한다.
2.실현 과정
서로 다른 포장 명령 을 통 해 단독 페이지 를 포장 하려 면 포장 명령 자체 부터 말 해 야 합 니 다.
1.패키지 명령 설정(패키지 모드 지정)
우리 가 실행 하 는 포장 명령 은npm run build입 니 다.이 명령 은 package.json 의 scripts 필드 에서 build 명령 을 실행 합 니 다.원본 값 은 다음 과 같 습 니 다.

{
 ...
 "scripts": {
  ...
  "build": "vue-cli-service build"
 }
 ...
}

이 명령 은 사실상 vue-cli-service 서 비 스 를 호출 하 는 build 명령 이라는 것 이다.
vue-cli 의 문서 에 따 르 면 build 명령 뒤에 mode 매개 변 수 를 따라 포장 모드 를 정의 할 수 있 습 니 다.기본 포장 모드 는 production,development,test 세 가 지 를 포함 합 니 다.그들의 행 위 는 주로 전체적인 process.env.NODE 를 포함 합 니 다.ENV 변 수 는 대응 하 는 값(즉,production,development,test)으로 설정 합 니 다.mode 인 자 를 생략 한 상황 에서 기본 값 은 production,즉 생산 모델 입 니 다.
이 세 가지 기본 모드 를 제외 하고 우 리 는 포장 모드 를 사용자 정의 할 수 있다.만약 에 우리 가 전문 적 으로 page 1 을 포장 하 는 포장 모델 을 정의 하려 면 이런 명령 을 내 릴 수 있 습 니 다.

 "scripts": {
  "build-page1": "vue-cli-service build --mode page1"
 }

npm run build-page 1 명령 을 실행 하면 웹 팩 이 자동 으로 page 1 을 포장 하 기 를 바 랍 니 다.
그러나 분명히 여기 만 수정 하 는 것 은 부족 하 다.웹 팩 은 페이지 1 이 어떤 모델 인지,그리고 어떤 행동 을 해 야 하 는 지 모른다.다음 에 우 리 는 페이지 1 이라는 포장 모드 를 위해 행동 을 정의 해 야 한다.
2.패턴 행동 정의
패키지 모드 의 본질 적 인 의 미 를 사용 합 니 다.사실은 특정한 환경 변 수 를 사용 합 니 다.
예 를 들 어 production 모드 는 process.env.NODE 를ENV 의 값 은 production 으로 설정 되 어 있 으 며,process.env 는 webpack 이 있 는 node 환경 에서 제공 하 는 전역 변수 입 니 다.이렇게 코드 에 서 는 process.env.NODE 에 따라ENV 의 값 은 현재 어떤 포장 모드 에 있 는 지 판단 할 수 있 고 코드 는 포장 모드 에 따라 다른 행 위 를 할 수 있다.
사용자 정의 패키지 모드 에 대해 서도 코드 가 다른 행동 을 할 수 있 도록 전역 변 수 를 지정 할 수 있 습 니 다.vue-cli 문서 에 따 르 면 모든 사용자 정의 모드 에 대응 하 는 변 수 는 루트 디 렉 터 리 의.env.xxx 파일 에 정의 해 야 합 니 다.예 를 들 어 우리 의 포장 모드 이름 이 page 1 이 라면 프로젝트 루트 디 렉 터 리 에'env.page 1'파일 을 새로 만들어 야 합 니 다.

패키지 모드 가 page 1 로 지정 되면 웹 팩 은 이 파일 에서 정의 하 는 변 수 를 사용 합 니 다.파일 에서 변 수 를 이렇게 정의 할 수 있 습 니 다:
.env.page1

NODE_ENV = 'production'
page = 'page1'

현재 패키지 모드 페이지 1 을 사용 하면 웹 팩 은 이 환경 파일 을 읽 고 이 정 의 된 변 수 를 전역 대상 process.env 에 하나씩 추가 합 니 다.따라서 이때 process.env.page 의 값 은 문자열'page 1'(NODEENV 의 값 은 기본적으로 production 입 니 다.여 기 는 생략 할 수 있 습 니 다).
전역 변수 페이지 에 변수 페이지 를 등록 하면 프로그램 에서 패키지 행 위 를 정의 할 수 있 습 니 다.
3.포장 논리 정의
이전에 우리 가 여러 페이지 의 설정 을 정 의 했 을 때 페이지 필드 는 고정된 값,즉 세 개의 포장 입 구 를 정 의 했 습 니 다.현재 전역 변수 process.env.page 가 있 습 니 다.우 리 는 정 해진 값 으로 설정 하지 않 고 이 변수의 값 에 따라 포장 입 구 를 동적 으로 정의 할 수 있 습 니 다.이 때 vue.config.js 는 다음 과 같이 개조 할 수 있 습 니 다.

function resolvePages(page){
 let page1 = {
  entry: 'src/pages/page1/main.js',
  template: 'public/index.html',
  filename: 'page1.html',
 };
 let page2 = {
  entry: 'src/pages/page2/main.js',
  template: 'public/index.html',
  filename: 'page2.html',
 };
 let page3 = {
  entry: 'src/pages/page3/main.js',
  template: 'public/index.html',
  filename: 'page3.html',
 };
 return page === 'page1' ? { page1 } : 
  { page1, page2, page3 };
}
module.exports = {
 pages: resolvePages(process.env.page),
}

우 리 는 현재 process.env.page 의 값 을 읽 고 판단 합 니 다.만약 에 그 값 이 page 1 이 라면 우리 가 page 1 포장 모드 에 있다 는 것 을 설명 합 니 다.그래서 resolve Pages 함수 가 돌아 오 는 대상 은 page 1 이라는 페이지 의 입구 만 포함 하고 그렇지 않 으 면 세 개의 포장 입구 로 돌아 가 여러 페이지 의 응용 을 완 료 했 습 니 다.
이 원 리 를 바탕 으로 우 리 는 page 2,page 3 의 포장 모델 을 정의 할 수 있 고 심지어 더욱 복잡 한 포장 모델(예 를 들 어 page 1 과 page 2 를 동시에 포장 하 는 것)을 정의 할 수 있다.이때 resolve Pages 함수 의 반환 값 은 약간 복잡 할 뿐이다.

return page === 'page1' ? { page1 } : 
 page === 'page2' ? { page2 } : 
 page === 'page1,page2' ? { page1, page2 } :
 ...
 { page1, page2, page3 };

지금 모든 준비 가 다 되 었 다.
npm run build-page 1 명령 을 실행 할 때 vue-cli 는 지정 한 page 1 모드 에 대응 하 는.env.page 1 파일 을 먼저 읽 습 니 다.process.env 에 환경 변수 page 를 추가 합 니 다.그리고 vue-cli 는 vue.config.js 설정 파일 의 pages 필드 를 읽 고 resolve Pages 함 수 를 호출 하 며 변수 process.env.page 를 전송 합 니 다.포장 입구 대상 은{page 1}입 니 다.포장 입구 가 하나 밖 에 없 기 때문에 vue-cli 는 webpack 의 포장 서 비 스 를 호출 하여 이 페이지 를 단독으로 구축 합 니 다.
포장 할 때 만 mode 를 지정 할 수 있 느 냐 고 물 을 수도 있 습 니 다.사실은 아 닙 니 다.serve 명령 에 도 mode 인자 가 있 습 니 다.위 과정 에 따라 한 페이지 를 단독으로 시작 할 수 있 습 니 다.이 때 아래 의 스 크 립 트 만 정의 하 십시오.

{
 ...
 "scripts": {
  "serve-page1": "vue-cli-service serve --mode page1"
 }
}

포장 과정 과 별 차이 가 없 으 니 여 기 는 더 이상 군말 하지 않 겠 습 니 다.
주의해 야 할 것 은 Public 폴 더 의 자원 은 정적 자원 입 니 다.모든 포장 모드 를 사용 하 더 라 도 dist 폴 더 에 직접 복 사 됩 니 다.
3.포장 모델 의 응용
포장 모드 의 응용 은 한 페이지 의 포장 에 있 을 뿐만 아니 라 우 리 는 더욱 흔히 볼 수 있 는 예 를 들 어 우리 의 코드 를 포장 한 후에 여러 항목 에 배 포 될 수 있다 고 가정 하지만 이런 항목 사이 에는 작은 차이 가 존재 한다(예 를 들 어 특정한 표 의 스타일 이 다르다).만약 우리 가 모든 항목 에 코드 를 단독으로 만 들 면 코드 라 이브 러 리 는 유지 하기 가 매우 어려워 질 것 이다.이 럴 때 포장 모드 가 도움 이 된다.
우 리 는 이 항목 들 을 위해 각각 별도의 포장 명령 을 만 들 수 있 습 니 다.예 를 들 어:

{
 "scripts": {
  "build-project1": "vue-cli-service build --mode project1",
  "build-project2": "vue-cli-service build --mode project2",
 }
}

그 다음 에 루트 디 렉 터 리 에서 각각 포장 모드 에 환경 파일 을 정의 합 니 다.env.project 1,env.project 2.우 리 는 여기에서 각각 전역 변 수 를 정의 합 니 다.
.env.project1

VUE_APP_PROJECT = 'project1'

.env.project2

VUE_APP_PROJECT = 'project2'

여기 서 강조해 야 할 것 은 src 경로 의 코드 에서 env 의 특정한 변 수 를 참조 하려 면 이 변 수 는 반드시 VUEAPP_시작 하지 않 으 면 결 과 는 undefined(src 이외 의 코드 에 이 제한 이 없습니다.예 를 들 어 위 에서 vue.config.js 에서 인용 한 변 수 는 이 제약 을 따 르 지 않 습 니 다.물론 모든 사용자 정의 변수 에 이 접 두 사 를 추가 하여 실 수 를 방지 할 수 있 습 니 다).
현재 npm run build-project 1 을 실행 할 때 process.env.VUEAPP_PROJECT 의 값 은 procject 1 입 니 다.코드 에서 이 값 에 따라 다른 항목 을 구분 할 수 있 습 니 다.예 를 들 어 어떤 구성 요소 에서 우 리 는 프로젝트 1 에 대해 추가 논 리 를 추가 해 야 한다.

methods: {
 doSomething(){
  if(process.env.VUE_APP_PROJECT === 'project1'){
   //  project1         
   ...
  }
 }
}

npm run build-project 1 패키지 명령 을 실행 할 때 if 문장의 내용 이 유효 합 니 다.반대로 다른 모드 에 서 는 유효 하지 않 습 니 다.마찬가지 로 프로젝트 1 전용 시작 명령 을 설정 할 수 있 습 니 다.

"serve-project1": "vue-cli-service serve --mode project1"

npm run server-project 1 을 실행 하여 procject 1 환경 을 사용 할 수 있 습 니 다.
총결산
여러 페이지 응용 에서 한 페이지 를 포장 하 는 것 을 배 워 서 우 리 는 포장 모델 을 어떻게 사용자 정의 하 는 지 배 웠 다.이것 은 본 고의 가장 중요 한 지식 이 어야 한다.포장 모델 을 홍보 하고 우 리 는 코드 에 여러 프로젝트 를 추가 하 는 논 리 를 배 웠 기 때문에 우 리 는 여러 프로젝트 의 가 지 를 유지 하 는 비용 을 크게 낮 출 수 있 습 니 다.포장 모델 의 용 도 는 이것 뿐만 이 아 닐 수 있 으 니 독자 들 이 그것 을 이해 하고 능숙 하 게 활용 하 기 를 바란다.
다 중 페이지 vue 애플 리 케 이 션 의 단일 페이지 포장 방법(포장 모드 포함)에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.다 중 페이지 vue 애플 리 케 이 션 과 관련 된 단일 페이지 포장 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 바 랍 니 다!