vue - route + webpack 배치 단일 페이지 경로 프로젝트, 방문 새로 고침 으로 404 문제 발생

1500 단어
간단 한 소개
전단 동 료 는 Vue. js 프레임 워 크 를 사용 하여 vue - route 를 이용 하여 웹 팩 과 결합 하여 단일 페이지 경로 항목 을 만 들 었 습 니 다. 운영 은 서버 에서 nginx 를 설정 하 는 데 도움 을 주 었 습 니 다.배치 가 완료 되면 홈 페이지 를 방문 하 는 것 은 문제 가 없습니다. 홈 페이지 에서 2 급 페이지 를 열 어도 문제 가 없 지만 모든 2 급 페이지 를 열 면 다시 새로 고침 하면 404 현상 이 발생 합 니 다!다음 과 같다.
문제 의 원인:
페이지 를 새로 고 칠 때 접근 하 는 자원 을 서버 에서 찾 을 수 없습니다. vue - router 가 설정 한 경 로 는 실제 존재 하 는 경로 가 아니 기 때 문 입 니 다.
위의 404 현상 은 nginx 가 설정 한 루트 디 렉 터 리 아래 에 loading 이라는 실제 자원 이 존재 하지 않 기 때 문 입 니 다. 이 방문 자원 들 은 모두 js 에서 렌 더 링 되 었 습 니 다.
원래 설정:
[root@test-huanqiu ~]# cat /Data/app/nginx/conf/defaut.conf 

         server {
           listen 80;
           server_name www.newkdd.com;
           root /home/newkdd/www/;
           index index.html;
           access_log /var/log/testwx.log main;
        }

문제 해결:
nginx 설정 에 vue - route 의 점프 설정 을 추가 합 니 다. (여기 첫 페이지 는 index. html 입 니 다. index. php 라면 아래 에 대응 하 는 위치 로 교체 합 니 다) 다음 과 같이 정확하게 설정 합 니 다.
[root@test-huanqiu ~]# cat /Data/app/nginx/conf/default.conf 

         server {
           listen 80;
           server_name www.newkdd.com;
           root /home/newkdd/www/;
           index index.html;
           access_log /var/log/newkdd.log main;
           location / {
               try_files $uri $uri/ @router;
               index index.html;
           }
          location @router {
              rewrite ^.*$ /index.html last;
          }
     }

nginx 를 다시 시작 하면 문제 가 쉽게 풀 립 니 다.

좋은 웹페이지 즐겨찾기