vue多次打包后出現(xiàn)瀏覽器緩存

每次打包更新版本上傳到服務(wù)器上，會偶爾出現(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'
?? ?}
}

接下來就是打包好，就會發(fā)現(xiàn)打包出來的文件都有哈希值啦，就不會出現(xiàn)緩存問題啦，保證每次都是最新的。

使用hash解決vue瀏覽器的緩存

緩存問題

第一次打包，生成一個bundle.js，在index.html引入bundle.js文件，頁面加載，它會把bundle.js緩存到瀏覽器本地。

這是瀏覽器的緩存機制。當(dāng)我們又重新打包了，由于文件名還是bundle.js，瀏覽器就可能從緩存中獲取，因為瀏覽器發(fā)現(xiàn)這個bundle.js，在瀏覽器的緩存中有，緩存中有，就走緩存。從緩存中獲取上一次打包的結(jié)果。

怎么解決緩存問題

之所以有緩存是由于文件名或url名是一樣的，只有一樣了，瀏覽器才會偷懶，從緩存中獲取資源，如果url名或文件名不一樣，肯定不會走緩存，瀏覽器會當(dāng)成一個新資源。

解決辦法

打包時 指定 出口 文件名每一次都不一樣。

在webpack中有一個hash的東西：

hash可以保存每一次的值都是不一樣的。

filename:"bundle.[hash].js",  這樣定，每一次生成的打包后文件名就不一樣了。

注意：

當(dāng)hash 用于開發(fā)打包時會打包成不同名字的文件，但是用于打包生產(chǎn)模式時的文件時不會生成不同的文件名。

因為生產(chǎn)時只需要發(fā)布時打包一次就行了。而開發(fā)時需要多次打包。

效果如下：（打包后的文件后面多了一串字符） 

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。