vue多次打包后出現(xiàn)瀏覽器緩存的問題及解決
vue多次打包后出現(xiàn)瀏覽器緩存
每次打包更新版本上傳到服務(wù)器上，會(huì)偶爾出現(xiàn)代碼沒有更新還是舊代碼的邏輯，這就代表瀏覽器存在緩存的問題了。
解決方案
vue-cli2
webpack .prod.conf.js 下修改output
const ?Timestamp = new Date().getTime();
output: {
? ? path: config.build.assetsRoot,
? ? filename: utils.assetsPath('js/[name].[chunkhash].'+Timestamp+'js'),
? ? chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Timestamp+'js')
}vue-cli3
vue.config.js 下修改/添加output
const ?Timestamp = new Date().getTime();
configureWebpack: {
?? ?output: {?
?? ? ? filename: 'js/[name].'+Timestamp+'.js',
?? ? ? chunkFilename: 'js/[name].'+Timestamp+'.js'
?? ?}
}接下來就是打包好，就會(huì)發(fā)現(xiàn)打包出來的文件都有哈希值啦，就不會(huì)出現(xiàn)緩存問題啦，保證每次都是最新的。
使用hash解決vue瀏覽器的緩存
緩存問題
第一次打包，生成一個(gè)bundle.js，在index.html引入bundle.js文件，頁面加載，它會(huì)把bundle.js緩存到瀏覽器本地。
這是瀏覽器的緩存機(jī)制。當(dāng)我們又重新打包了，由于文件名還是bundle.js，瀏覽器就可能從緩存中獲取，因?yàn)闉g覽器發(fā)現(xiàn)這個(gè)bundle.js，在瀏覽器的緩存中有，緩存中有，就走緩存。從緩存中獲取上一次打包的結(jié)果。
怎么解決緩存問題
之所以有緩存是由于文件名或url名是一樣的，只有一樣了，瀏覽器才會(huì)偷懶，從緩存中獲取資源，如果url名或文件名不一樣，肯定不會(huì)走緩存，瀏覽器會(huì)當(dāng)成一個(gè)新資源。
解決辦法
打包時(shí) 指定 出口 文件名每一次都不一樣。
在webpack中有一個(gè)hash的東西：
hash可以保存每一次的值都是不一樣的。
filename:"bundle.[hash].js", 這樣定，每一次生成的打包后文件名就不一樣了。
注意：
當(dāng)hash 用于開發(fā)打包時(shí)會(huì)打包成不同名字的文件，但是用于打包生產(chǎn)模式時(shí)的文件時(shí)不會(huì)生成不同的文件名。
因?yàn)樯a(chǎn)時(shí)只需要發(fā)布時(shí)打包一次就行了。而開發(fā)時(shí)需要多次打包。
效果如下：（打包后的文件后面多了一串字符）
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了DataV?全屏容器組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
vue使用vuedraggable對(duì)列表進(jìn)行拖拽排序
vuedraggable 是一個(gè)基于 Vue 的拖拽排序組件,它可以讓你輕松地在 Vue 應(yīng)用中實(shí)現(xiàn)拖拽排序功能,下面就跟隨小編一起來了解下它的具體應(yīng)用吧2024-12-12
karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例，這次搭建的測(cè)試環(huán)境和開發(fā)環(huán)境隔離，所以理論上適用所有使用vue的開發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05
Vue的路由動(dòng)態(tài)重定向和導(dǎo)航守衛(wèi)實(shí)例
下面小編就為大家分享一篇Vue的路由動(dòng)態(tài)重定向和導(dǎo)航守衛(wèi)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue如何安裝使用Quill富文本編輯器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
通過url傳遞參數(shù)是我們?cè)陂_發(fā)中經(jīng)常用到的一種傳參方法，但通過url傳遞后改如果獲取呢？下面這篇文章主要給大家介紹了關(guān)于vue如何不通過路由直接獲取url中參數(shù)的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
再次遇到監(jiān)聽子組件收到父組件傳過來的值,如果這個(gè)值變化,頁面中的值發(fā)現(xiàn)是不會(huì)跟著同步變化的,本文給大家介紹Vue2?watch監(jiān)聽props的值,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了vue同步父子組件和異步父子組件的生命周期順序問題,需要的朋友可以參考下2018-10-10
分分鐘學(xué)會(huì)vue中vuex的應(yīng)用（入門教程）
本篇文章主要介紹了vue中vuex的應(yīng)用（入門教程），詳細(xì)的介紹了vuex.js和應(yīng)用方法，有興趣的可以了解一下2017-09-09
這篇文章主要為大家介紹了Vue中從template到j(luò)sx語法教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10