vue - router + webpack 배치 nginx 새로 고침 404 문제 및 해결 방안

1. 문제:
Vue. js 프레임 워 크 를 사용 하여 vue - route 를 이용 하여 웹 팩 과 결합 하여 단일 페이지 경로 항목 을 만 들 었 습 니 다. 운영 은 서버 에서 nginx 를 설정 하 는 데 도움 을 줍 니 다.배치 가 완료 되면 홈 페이지 를 방문 하 는 것 은 문제 가 없고 홈 페이지 에서 2 단계 페이지 를 여 는 것 은 문제 가 없 지만 모든 2 단계 페이지 가 열 리 면 다시 새로 고침 하면 404 현상 이 나타난다.
2. 이유:
페이지 를 새로 고 칠 때 접근 하 는 자원 을 서버 에서 찾 을 수 없습니다. vue - router 가 설정 한 경 로 는 실제 존재 하 는 경로 가 아니 기 때 문 입 니 다.위의 404 현상 은 nginx 에서 설정 한 루트 디 렉 터 리 / data / app / xqsj 때 문 입 니 다.wx / dist 아래 에 loading 이라는 실제 자원 이 존재 하지 않 습 니 다. 이 방문 자원 들 은 모두 js 에서 보 여 줍 니 다.서버 nginx 의 초기 설정 은 다음 과 같 습 니 다 (도 메 인 이름: flymoth. com).

         server {
         listen 80;

         server_name flymoth.com;
         root /Data/app/xqsj_wx/dist;
         index index.html;

         access_log /var/log/testwx.log main;

         }

위 와 같이 404 가 나타 난 이 유 는 이 도 메 인 이름 루트 디 렉 터 리 / data / app / xqsj 때 문 입 니 다.wx / dist 아래 에 loading 이라는 실제 디 렉 터 리 가 존재 하지 않 습 니 다.
3. 해결 방안
nginx 설정 에 vue - route 의 점프 설정 을 추가 합 니 다.

server {
         listen 80;

         server_name testwx.wangshibo.com;
         root /Data/app/xqsj_wx/dist;
         index index.html;
         access_log /var/log/testwx.log main;
          //   
         location / {
             try_files $uri $uri/ @router;
             index index.html;
         }

        location @router {
            rewrite ^.*$ /index.html last;
        }

}