vue-router+nginx 루트가 아닌 경로 구성 방법
- 不言원래의
- 2018-07-09 14:07:292986검색
이 글에서는 주로 vue-router+nginx 비루트 경로의 구성 방법을 소개합니다. 이는 특정 참조 값을 가지고 있습니다. 이제 필요한 친구들이 참조할 수 있습니다.
vue-router의 기본 데이터 해시 모드 사용 URL의 해시는 전체 URL을 시뮬레이션하는 데 사용되므로 URL이 변경되면 페이지가 다시 로드되지 않습니다.
일반적으로 우리는 보기 흉한 해시를 좋아하지 않습니다. index.html#/matchResult와 유사하게 라우팅 기록 모드를 사용할 수 있습니다. 기록 모드는 History.pushState API를 사용하여 페이지 이동을 구현합니다.
하지만 nginx를 사용할 때 몇 가지 구성을 추가해야 하는 문제가 있습니다.
루트 경로 아래에 직접 구성
접속 시 http://yoursite.com을 입력하면 됩니다. nginx에서의 구성은 다음과 같습니다
location / {
try_files $uri $uri/ /index.html;
}
루트 경로가 아닌 경로 구성
이 있는 경우 도메인 이름 프로젝트가 여러 개인 경우 루트 경로 구성을 사용하는 것은 적절하지 않습니다. 예를 들어
A project
http://yoursite.com/A
B project
http://yoursite.com/B
nginx와 같이 루트 경로 아래에 경로 레이어를 지정해야 합니다. configuration
location ^~/A {
alias /XX/A;//此处为A的路径
index index.html;
try_files $uri $uri/ /A/index.html;
}
location ^~/B {
alias /XX/B;//此处为B的路径
index index.html;
try_files $uri $uri/ /B/index.html;
}
tip: 참고: 별칭을 사용할 때는 루트를 사용할 수 없습니다
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 중국사이트!
관련 권장 사항:
addRoutes가 동적으로 경로를 추가한 후 vue가 새로 고침 실패 문제를 해결하는 방법
Vue iview-admin 프레임워크의 보조 메뉴를 3단계 메뉴로 변경하는 방법
위 내용은 vue-router+nginx 루트가 아닌 경로 구성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!