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 프로젝트

http://와 같이 루트 경로 아래에 경로 레이어를 지정해야 합니다. yoursite.com/A

B 프로젝트

http://yoursite.com/B

nginx 구성

  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: 루트가 아닌 별칭을 사용하도록 주의하세요

위 내용은 이 글의 전체 내용입니다. , 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

Vue 프로젝트의 구성, 패키징 및 게시 프로세스 소개

vue v-model의 동적 생성 소개

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