IT이야기

새 Vue 앱 버전을 릴리스할 때 크롬에서 캐시를 강제로 지우는 방법

cyworld 2022. 5. 15. 23:45
반응형

새 Vue 앱 버전을 릴리스할 때 크롬에서 캐시를 강제로 지우는 방법

로 앱을 만들었다.vue-cli그리고 나서 나는 그 건물을 짓는다.dist생산용 폴더

앱이 배포된 위치IIS플라스크 백엔드를 넣고 잘 작동한다.

몇 가지 변경을 해야 하고 배치를 다시 해야 할 때 문제가 발생한다.이후 앱이 작동하지 않아 사용자들이 전화를 하지만 크롬 캐시를 지우면 앱은 다시 정상 작동한다.

내가 이 문제를 어떻게 해결할 수 있을까?새로운 애플리케이션 버전을 출시할 때 자동으로 크롬 캐시를 지우는 방법이 있는가?

고마워요.

내 dist 폴더

여기에 이미지 설명을 입력하십시오.

배포: IIS에 폴더 디스테이션을 복사하여 붙여넣기

dist 폴더에 있는 파일이 정확하다면, 문제가 axios 캐시에 있는 것이 아닐까?나는 휴식 아피스에 약간의 변화를 주기도 했다.

사용한다면vue-cli, 그리고 나서 그것은 건축을 위한 내장 웹 팩 구성을 가지고 있다.dist. 그리고 실제로 출력 파일에 해시 이름을 추가한다.하지만 어떻게 해서든 제거되었다면, 당신은 그것을 다시 웹팩 구성에 추가할 수 있다.

  output: {
    filename: '[name].[hash].bundle.js'
  }

그리고 당신의 앱은 다음과 같이 보일 것이다.

게다가, 이 모든 것들이 html에 어떻게 추가될지는 다룰 필요가 없고, coz 웹 팩이 당신을 위해 알아낼 것이다.

나도 같은 문제가 있었고 패키지의 버전 번호를 변경(증가)했다.빌드 명령을 실행하기 전에 json이 수정했다.

예를 들어 기본적으로 버전 번호는"0.1.0"

꾸러미json 파일:

{
  "name": "project-name",
  "version": "0.1.5",
  "private": true,
  ...
}

당신은 당신의 js 파일에 버전 쿼리를 추가해야 한다.이렇게 하면 브라우저가 파일이 변경되었는지, 새로운 버전을 다운로드해야 하는지 알 수 있다.

그래서 다음과 같은 것이 있다.

<script src="main.js?v=1.1"></script>
<script src="main.js?v=1.2"></script>

기타...

브라우저의 캐시에 액세스할 수 없어, 그건 보안상 큰 결함이 될 거야.

이 문제를 해결하려면 일부 헤더를 브라우저에서 프로그램을 캐시하지 말라는 플라스크 응답과 함께 보내야 한다.

에 대한 예다.express.js아이디어를 얻으려면:

  setHeaders: function (res, path, stat) {
    res.set('Cache-Control', 'no-cache, no-store, must-revalidate') // HTTP 1.1
    res.set('Pragma', 'no-cache') // HTTP 1.0
    res.set('Expires', '0') // Proxies
  }

캐싱에 대한 자세한 내용은 여기를 참조하십시오.

이것이 서비스 근로자/PWA와 무관하다고 가정할 경우 프런트 엔드 버전을 반환하여 솔루션을 구현할 수 있다.

axiosConfig.js

axios.interceptors.response.use(
  (resp) => {
    let fe_version = resp.headers['fe-version'] || 'default'
    if(fe_version !== localStorage.getItem('fe-version') && resp.config.method == 'get'){
      localStorage.setItem('fe-version', fe_version)
      window.location.reload() // For new version, simply reload on any get
    }
    return Promise.resolve(resp)
  },
)

또한 다음과 같은 작업을 수행할 수 있다.fe-version모든 종류의 독특함에 근거하여 반환된다. 여기서 나는 커밋 SHA를 사용하였다.

전문 기사: https:///blog.francium.tech/vue-js-cache-not-get-in-production-on-656fcc5a85fe

나에게 해답은 내 DNS 공급자 수준에서 캐싱하는 것이었다.기본적으로, 나는 Cloudflare DNS 프록시를 사용하고 있고 그들은 웹사이트를 캐싱하고 있어서 개발 모드에서는 코드 업데이트를 받지 못했다.나는 바꿀 것을 얻기 위해 여러 번 캐시를 치워야 했다.나는 어떤 것이 업데이트되기 전에 상당한 기간을 기다려야 했다.

껐다가 다시 멈췄어.

내가 제안하고 싶은 방법

<script src="{{ asset('js/app.js?time=') }}{{ time() }}" defer></script>

아래 스크립트 pubsc/index.properties에 추가

<head>
...
  <script type="text/javascript" language="javascript">
    var timestamp = (new Date()).getTime();
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "<%= BASE_URL %>sample.js?t=" + timestamp;
    document.head.appendChild(script);
  </script>
...
</head>

한번 해 볼래?

vm.$forceUpdate();

또한 구성 요소 자체에는 고유한 키가 필요할 수 있다.

<my-component :key="unique" />

참조URL: https://stackoverflow.com/questions/59648117/how-to-force-clearing-cache-in-chrome-when-release-new-vue-app-version

반응형