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文件，頁(yè)面加載，它會(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è)參考，也希望大家多多支持腳本之家。