vue-router+nginx 루트가 아닌 경로 구성 방법

이 글에서는 주로 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+ts+sqlite 구성 방법

위 내용은 vue-router+nginx 루트가 아닌 경로 구성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!