昨天遇到一個問題典阵,關(guān)于vue的單頁面應(yīng)用本地即時更改新增部分 放去遠程服務(wù)器 訪問卻有緩存問題 需要強制刷新?
查閱資料得知可能是由于html文件不會被強制替換 造成了不會去服務(wù)器獲取 默認獲取到的是緩存的文件
參考1?2021-12-08 http常用緩存策略及vue-cli單頁面應(yīng)用醉冤、服務(wù)器端(nginx)如何設(shè)置緩存或者禁用 - 簡書
參考2?http常用緩存策略及vue-cli單頁面應(yīng)用、服務(wù)器端(nginx)如何設(shè)置緩存或者禁用_前端李小白的博客-CSDN博客_nginx清除緩存
(1)通過設(shè)置nginx 會導致nginx不可用 包括重啟 均無法刷新頁面 懷疑是自己不會使用
(2) 在html 文件中加入meta 標簽 頁面未清除緩存 無法達到刷新的效果
(3)在vue.config.js 文件中嘹承,找到output寫入
注:chunkhash是哈希模式的 根據(jù)不同的入口文(Entry)進行依賴文件解析,構(gòu)建對應(yīng)的chunk,生成對應(yīng)的哈希值乔询。
hash?:表示所有文件哈希值相同谎砾,如果任意文件內(nèi)容發(fā)生變化僧叉,則再次打包后,所有哈希值均改變且相同棺榔。即當任意module發(fā)生改變時瓶堕,所有bundle的hash都改變且相同。
contenthash?:在打包時症歇,我們會在js文件中導入CSS文件郎笆,因為他們是同一個入口文件谭梗,我們只改了JS代碼,但是它的CSS在抽離生成CSS文件時hash也會跟著變宛蚓,這個時候就需要contenthash來解決激捏。
?output:?{??????//?輸出重構(gòu)??打包編譯后的?文件名稱??【模塊名稱.版本號.時間戳】??????
filename:?`js/[name].[chunkhash].${timeStamp}.js`,?
?????chunkFilename:?`js/[id].[chunkhash].${timeStamp}.js`????},// chunkhash