새 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" />
'IT이야기' 카테고리의 다른 글
C의 기본 열거값이 모든 컴파일러에 대해 동일한가? (0) | 2022.05.16 |
---|---|
Vuex 상태에서 v-if를 사용하는 Vue3 구성 요소 (0) | 2022.05.16 |
Java 바이트 배열에서 문자열로 바이트 배열 (0) | 2022.05.15 |
@Before, @BeforeClass, @BeforeAll과 @BeforeAll 사이의 차이 (0) | 2022.05.15 |
Vue.js - v-model에서 매개 변수를 전달하여 중첩된 속성 변경 (0) | 2022.05.15 |