라우팅 기록 모드를 Vue에 패키징한 후 페이지가 비어 있는 문제를 해결하는 방법

이 글은 주로 Vue의 라우팅 기록 모드를 소개하고 있으며 패키징 후 페이지가 비어 있습니다. 지금 공유하고 참고용으로 제공하겠습니다.

Vue의 라우팅은 기본 해시 모드이며 일반적으로 기본 패키징에는 문제가 없습니다. 그러나 해시 모드는 URL에 #이 있기 때문에 아름답지 않으며 WeChat에서 공유, 승인된 로그인에 몇 가지 함정이 있습니다. 등이 있습니다. 따라서 히스토리 모드에도 몇 가지 응용 시나리오가 있습니다. 초보자는 히스토리 모드를 패키징한 후 페이지가 비어 있고 리소스 로딩 오류에 대한 오류 메시지가 없는 상황을 자주 접하게 됩니다.

실제로 공부해 보면. 주의 깊게 살펴보면 프로젝트가 디렉터리에 직접 배치되어 있으면 문제가 없다는 것을 알 수 있습니다. 하위 디렉터리라면 공백이 될 것입니다. 이 vue에 대한 공식적인 설명은 베이스를 추가해야 한다는 것입니다

// base: '/history',
// mode: 'history',

이 베이스가 프로젝트 경로입니다.

위의 두 가지 모두 해결되었습니다. 여전히 현재로서는 홈 페이지만 액세스할 수 있음을 알 수 있습니다. 홈을 통해 다른 경로를 클릭하는 것도 가능합니다. 페이지를 새로 고치면 오류가 발생합니다. 기록 모드를 이해하는 사람들은 기록을 시뮬레이션하는 브라우저에 비해 기록 모드가 h5 .pushState의 기록이라는 것도 알아야 합니다. 실제 서버에는 그러한 경로 리소스가 없습니다. 왜 해시 모드에 이 문제가 없나요? 해시 모드는 #을 사용하며 서버는 이를 구문 분석하지 않지만 여전히 html을 반환하고 인덱스 .html은 vue 라우팅에 따라 구문 분석됩니다. 히스토리 모드는 서버에 해당 경로가 없으면 오류가 보고됩니다. vue-router의 공식 문서에는 ngnix 구성

 location / {
 try_files $uri $uri/ /index.html;
}

과 같은 다양한 구성이 소개되어 있습니다. 위 내용은 다이렉트 프로젝트의 루트 디렉터리라면 괜찮지만 프로젝트가 루트 디렉터리가 아닌 경우에는 여전히 문제가 발생합니다,

location /history {
   root C:/web/static;
 index index.html index.htm;
 #error_page 404 /history/index.html;
 if (!-e $request_filename) {
  rewrite ^/(.*) /history/index.html last;
  break;
 }
}

위 내용은 프로젝트 경로명 내역이므로 구성 후에는 vue가 패키징된 후 페이지가 비어 있고 히스토리 경로에 자유롭게 액세스할 수 있다는 문제가 있습니다. 그러나 루트가 아닌 디렉토리에 있는 프로젝트는 기본 경로를 추가해야 합니다

이상이 이 글의 전체 내용입니다. 모든 분들께 도움이 되었으면 좋겠습니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!

관련 추천:

Vue SPA 단일 페이지 애플리케이션의 홈 화면 최적화 소개

텍스트 영역에 고정된 수의 입력 줄을 구현하고 밑줄 스타일을 추가하는 Vue의 아이디어

위 내용은 라우팅 기록 모드를 Vue에 패키징한 후 페이지가 비어 있는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!