문제 설명
vue 스캐 폴딩을 사용하여 프론트 엔드 프로젝트를 구축 할 때 캐싱 문제로 어려움을 겪는 경우가 많습니다. 특정 증상은 프로그램 버전이 업그레이드 될 때 사용자가 여전히 캐싱으로 인해 이전 페이지에 액세스하고 있으며 많은 학생들이 매우 폭력적이며 직접 추가하는 것입니다. index.html에 다음 몇 줄의 코드를 추가합니다.
<meta http-equiv = "Expires"content = "0"> <meta http-equiv = "Pragma"content = "no-cache"> <meta http-equiv = "Cache-control"content = "no-cache" > <meta http-equiv = "Cache"content = "no-cache">
캐시 문제는 업그레이드 과정에서 해결되었지만 사용자 가 프로그램에 액세스 할 때마다 서버 를 다시 요청하는 직접적인 원인이 되었으며 모든 정적 리소스를 더 이상 캐시 할 수 없어 트래픽이 낭비되고 네트워크 압력이 증가합니다.
설명 필요
우리가 정말로 해결해야 할 문제는 단순히 캐시하거나 캐시하지 않는 것이 아니라 상황에 따라 달라집니다.
1. 각 프로그램 업그레이드 후 사용자는 캐시 문제로 인해 이전 프로그램을 실행하지 않습니다.
2. 프로그램이 업그레이드되지 않은 경우 사용자의 정적 자원 요청이 캐시를 사용할 수 있습니다.
솔루션 원리
vue 스캐 폴딩은 패키징 될 때마다 입력되는 정적 리소스 파일의 이름에 해시 접미사를 추가하고 해당 해시 접미사는 도입 될 때 index.html에도 추가되므로 각 정적 리소스는 새 버전이므로 업그레이드로 인한 캐싱 문제에 대해 걱정하지 마십시오. 그런 다음 index.html이 캐시되지 않도록하고 다른 정적 리소스를 캐시하여 요구 사항을 충족 할 수 있습니다.
vue-cli가 패키징 된 후 생성 된 js 파일
정적 자원 캐시를 만드는 것은 쉽습니다. 문제는 캐시가 아닌 index.html 만 만드는 방법 입니다. 여기서는 더 이상 프런트 엔드 코드에만 의존하여이를 달성 할 수 없으며 서버 구성을 사용해야합니다. 서버 구성을 통해 index.html 요청시 헤더를 별도로 설정하여 캐시 제어 목적을 달성합니다.
이행
Ngnix를 사용하는 경우 :
Ngnix는 비교적 쉽게 구현할 수 있으며 다음 구성 만 추가하면됩니다.
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}
Tomcat을 사용하는 경우 :
Tomcat은 좀 더 번거 롭습니다. 필터 (Filter)를 개발하고 구성해야합니다. 프론트 엔드 만 이해하는 경우 백엔드 형제에게 도움을 요청해야 할 수도 있습니다.
1. 먼저 자바로 필터를 작성해야합니다.
참고 : 경로는 세 번째 단계의 구성과 일치해야합니다.
2. 그런 다음이 필터를 임의의 이름으로 jar 패키지에 입력하고 tomcat / lib 디렉토리에 배치했습니다.
3. 마지막으로 구성 파일 tomcat / conf / web.xml을 수정하고 끝 </ web-app> 위에 다음 코드를 추가해야합니다.
MyFilter는 필터에 부여한 이름이며 원하는대로 변경할 수 있습니다.
그리 큰 문제는 아니며 대부분의 학생들이 처리 할 수 있어야합니다.