vue-cli 3.0 다 중 페이지 응용 경험 기록 총화 실현

본 논문 의 사례 는 vue-cli 3.0 이 여러 페이지 의 응용 을 실현 한 경험 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
이야기 의 배경
이것 은 휴가 를 마치 고 돌아 오 자마자 모든 것 이 계획 되 어 있 었 다.아침 에 오 자마자 프로젝트 경력 의 새로운 요 구 를 받 았 다.(이것 은 난 장 판 이 고 이미 여러 사람 이 인수 하고 이 직 했다)나 는 마음속 으로 거절 했다.그러나 마지막 방법 은 다른 사람 이 하지 않 고 결국 나 에 게 떨 어 졌 다.
수 요 를 받 고 수 요 를 먼저 봤 는데 예전 에 비해 많이 바 뀌 었 고 데이터 구조 가 모두 바 뀌 었 다.원래 의 기초 위 에서 바 꾸 면 원가 가 좀 커서 프로젝트 를 재 개 해서 실현 하려 고 했다.그래서 vue 의 최신 비계 도구 vue-cli 3.0 을 사용 하여 프로젝트 를 초기 화 했 습 니 다.그런데 갑자기 한 회의 가 또 왔 습 니 다.프로젝트 매니저 는 업 무 를 평 가 했 습 니 다.다른 동료의 업 무량 이 너무 많다 고 생각 하여 백 스테이지 의 일부 기능 을 저 에 게 던 져 서 이 루어 졌 습 니 다.그 당시 마음 은 mmp 였 습 니 다.
원래 프로젝트 는 한 페이지 의 응용 을 하 는 것 이 고 저 에 게 새로 분 배 된 기능 입 니 다.페이지 도 많 지 않 고 기능 도 복잡 하지 않 아서 하나의 공 사 를 따로 시작 하고 싶 지 않 습 니 다.이 기능 을 기 존의 공사 에서 하려 고 합 니 다.그러나 이것 은 전혀 관련 이 없 는 두 가지 기능 입 니 다.그래서 여러 페이지 가 머 릿 속 에 응용 되 고 싶 습 니 다.
그래서 한 페이지 응용 에서 여러 페이지 응용 으로 개조 하 는 과정 을 시작 했다.
1.항목 초기 화
vue 3.0 을 사용 하여 항목 을 만 듭 니 다.항목 의 기본 값 은 단일 페이지 응용 프로그램 입 니 다.디 렉 터 리 는 다음 과 같 습 니 다.

|-node_modules
|-public
	|-favicon.ico
	|-index.html
|-src
	|-assets
	|-components
	|-store
	|-views
	|-App.vue
	|-main.js
|-.browserslistrc
|-.env.development
|-.env.production
|-.eslintrc.js
|-.gitignore
|-.prettierrc.js
|-babel.config.js
|-package.json

2.한 페이지 의 응용 을 다 면 응용 으로 수정 합 니 다.
1.(필수)src 파일 에 폴 더 를 추가 합 니 다.모든 폴 더 는 하나의 독립 된 페이지 를 대표 합 니 다.폴 더 에는 App.vue,main.js,router.js 파일 이 포함 되 어 있 습 니 다.
2.(필수)src 파일 에 프로필 vue.config.js 추가
3.(선택 가능)src 파일 에 파일 store.js 를 추가 하여 데 이 터 를 저장 할 수 있 고 모든 독립 된 페이지 에서 찾 을 수 있 습 니 다.
4.(선택 가능)원래 src 파일 에 있 던 App.vue,main.js 파일 삭제
――――――――――――――――
최종 파일 디 렉 터 리 는 다음 과 같 습 니 다.

|-node_modules
|-public
	|-favicon.ico
	|-index.html
|-src
	|-api
	|-assets
	|-components
	|-store
	|-styles
	|-utils
	|-views
		|-admin
			 |-App.vue
			 |-main.js
			 |-index.vue
			 |-router.js
		|-front
			 |-App.vue
			 |-main.js
			 |-index.vue
			 |-router.js
|-.browserslistrc
|-.env.development
|-.env.production
|-.eslintrc.js
|-.gitignore
|-.prettierrc.js
|-babel.config.js
|-package.json
|-vue.config.js

vue.config.js 설정
이 파일 에 각 페이지 의 입구,출구,템 플 릿 파일 을 추가 합 니 다.구체 적 인 설정 은 다음 과 같 습 니 다.

설정 이 완료 되면npm run serve을 통 해 프로젝트 를 시작 합 니 다.모든 것 이 정상 이라는 것 을 알 게 되 었 습 니 다.그래서 즐겁게 인 코딩 을 하고 브 라 우 저 를 엽 니 다.http://192.168.0.28:8080/front,효과 보기:

모든 것 이 완벽 해서 포장 을 시 작 했 습 니 다.명령 행 에서 npm run build 를 능숙 하 게 두 드 렸 습 니 다.진 도 를 보면 서 조금씩 걸 었 습 니 다.마음 도 약간 흥분 되 었 습 니 다.포장 이 완성 되 었 습 니 다.포장 디 렉 터 리 를 보 세 요.

http-server 를 이용 하여 서 비 스 를 시작 한 다음 에 방문 합 니 다.http://192.168.0.28:8080/front.html
결국 페이지 공백???이게 무슨 상황 이 죠?
그래서 나 는 천천히 생각해 보 니 좀 이상 하 다 는 것 을 알 게 되 었 다.개발 환경 에서 내 가 방문 한 것 은?http://192.168.0.28:8080/fronthttp-server 서버 에서 제 가 방문 한 것 은http://192.168.0.28:8080/front.html。그래서 http-server 의 주 소 를 바 꾸 었 습 니 다.http://192.168.0.28:8080/front결 과 는 404 입 니 다.나중에 생각해 보 니 이것 은 vue 경로 의 모델 이 history 로 인해 발생 한 것 같 습 니 다.그래서 hash 로 바 꾸 려 고 했 는데 효과 가 없 었 습 니 다.나중에 문 서 를 보 니 vue-cli 3.0 이 여러 페이지 의 응용 을 개 발 했 고 기본 값 은 history 모델 입 니 다.어 떡 하지?그래서 경로 부터 시작 해서 routes 의 path 를 xxx.html 로 바 꾸 려 고 했 는데 실현 코드 는 다음 과 같 습 니 다.

이제 통과.http://192.168.0.28:8080/front.html방문 하 세 요.됐 습 니 다.하하,마음 이 조금 즐 거 웠 습 니 다.그리고 포장 한 코드 를 올 려 백 스테이지 친구 에 게 제출 하여 통합 시 켰 습 니 다.통합 되 고 문제 가 생 겼 습 니 다.페이지 가 공백 이 되 었 습 니 다.처음에 머 릿 속 에'publicPath 가 잘못 되 었 나 요?'라 고 생각 했 지만 딱 봐 도 괜 찮 습 니 다.저 는 상대 적 인 경 로 를 사 용 했 고 요청 도 모두 보 냈 습 니 다.바로 공백 이 었 습 니 다.나중에 백 스테이지 친구 들 이 프로젝트 를 루트 디 렉 터 리 에 배치 하면 방문 할 수 있다 고 말 했 습 니 다.제 가 듣 고 보 니 경로 문제 일 수도 있 습 니 다.그래서 과 는 경로 에 base 옵션 을 추 가 했 습 니 다.코드 는 다음 과 같 습 니 다.

다시 포장 하여 백 스테이지 학생 들 에 게 집적 시 켜 마침내 큰 성 과 를 거 두 었 습 니 다.이번 경험 을 통 해 많은 것 을 얻 은 셈 이 므 로 기록 하여 함께 격려 하 겠 습 니 다!
본 고 에서 말 한 것 이 여러분 vue.js 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.