vue - route + webpack 배치 단일 페이지 경로 프로젝트, 방문 새로 고침 으로 404 문제 발생
전단 동 료 는 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 를 다시 시작 하면 문제 가 쉽게 풀 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.