히 스토리 라 우 터 Nginx 설정

머리말
단일 페이지 응용 프로그램 을 개발 할 때 History 루트 를 사용 하면 모든 접근 가능 한 경로 가 index. html 의 내용 에 직접 접근 할 수 있 도록 해 야 합 니 다.본 고 는 주로 History 루트 모드 에서 의 Nginx 설정 을 설명 한다.
1. Index. html 서버 로 컬 존재
이런 방식 은 매우 보편적 일 것 이다. VueRouter 의 공식 문서 에서 도 언급 했 듯 이 하나의 location try 만 설정 하면 된다.files 는 기본적으로 index. html 를 가리 키 면 됩 니 다.

location / {
  add_header Cache-Control 'no-store, no-cache'; //      
  try_files $uri $uri/ /index.html;
}

예 를 들다

방문 할 기본 페이지 Url 은 https://a.b.com/main/, 이 고 index. html 는 서버 의 / home / dist / index. html 에 저 장 됩 니 다

//    a.b.com   
location /main/ {
  try_files $uri $uri/ /home/dist/index.html;
}

             https://a.b.com/main/a/    https://a.b.com/main/b/,     https://a.b.com/main/        ,         index.html,       。

방문 할 페이지 Url 기본 경 로 는 https://b.c.com/, 이 고 index. html 는 서버 의 / dist / index. html 에 저 장 됩 니 다.

//    b.c.com   
location / {
  try_files $uri $uri/ /dist/index.html;
}

이러한 설정 은 방문 https://b.c.com/a/ 또는 https://a.b.com/b/, 즉 방문 https://a.b.com/ 의 임의의 하위 경 로 를 직접 방문 할 수 있 습 니 다. index. html 에 직접 방문 하여 페이지 를 정상적으로 방문 할 수 있 습 니 다.

2. Index. html 에 원 격 주소 가 존재 합 니 다.
때때로 우리 의 index. html 는 서버 로 컬 에 존재 하지 않 고 oss 나 cdn 에 올 릴 수 있 습 니 다. 즉, 원 격 주소 입 니 다. 예 를 들 어 https://oss.b.com/project/ind... 이 럴 때 아래 의 설정 방식 이 필요 합 니 다.

location ^~ /test/ {
    add_header Cache-Control 'no-store, no-cache'; //      
    rewrite ^ /project/index.html break;
    proxy_pass https://oss.b.com;
}

즉, 방문 경 로 를 다시 쓰 고 proxy 를 통 해패스 에이전트 에서 원 격 파일 로 이동 합 니 다.
예 를 들다

방문 할 기본 페이지 Url 은 https://a.b.com/main/, 이 고 index. html 는 https://oss.b.com/project/ind... 에 저 장 됩 니 다

//    a.b.com   
location /main/ {
    rewrite ^ /project/index.html break;
    proxy_pass https://oss.b.com;
}

             https://a.b.com/main/a/    https://a.b.com/main/b/,     https://a.b.com/main/        ,         index.html,       。

방문 할 페이지 Url 기본 경 로 는 https://b.c.com/, 이 고 index. html 는 https://oss.b.com/index.html 아래

//    b.c.com   
location / {
    rewrite ^ /index.html break;
    proxy_pass https://oss.b.com;
}

에 저 장 됩 니 다. 이러한 설정 은 방문 https://b.c.com/a/ 또는 https://a.b.com/b/, 즉 방문 https://a.b.com/ 아래 의 임의의 하위 경 로 를 직접 방문 할 수 있 습 니 다. index. html 로 페이지 를 정상적으로 방문 할 수 있 습 니 다.

마지막 에 쓰다
본문 은 여기 서 끝 났 습 니 다 ~ 인터넷 에서 원 격 index. html 에 대한 설정 이 별로 없 기 때문에 이 글 을 썼 습 니 다. 여러분 에 게 유용 하 기 를 바 랍 니 다 ~

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

히 스토리 라 우 터 Nginx 설정

좋은 웹페이지 즐겨찾기