因瀏覽器緩存原因?qū)е聉ue 打包的文件 導(dǎo)致偶爾會出現(xiàn)不能即使更新最新代碼。因此在打包的文件名中添加一個版本號以便瀏覽器能區(qū)分祈噪。
解決方法：找到webpack .prod.conf.js
?? 1.定義版本變量： const? Version = new Date().getTime(); // 這里使用的是時間戳 來區(qū)分 盗棵，也可以自己定義成別的如：1.1
?? 2.修改要生成的js和css文件的配置項壮韭，把剛剛聲明的版本拼接進(jìn)要生成的文件名中；
?? output: {
??????? path: config.build.assetsRoot,
???????? filename: utils.assetsPath('js/[name].[chunkhash].' + Version + '.js'),
??????? chunkFilename: utils.assetsPath('js/[id].[chunkhash].' + Version + '.js')
??? },
然后直接 npm run build 打包后 就可以看到dist 文件里的js 文件名帶上里版本號
自我總結(jié)：很多人說這種方法沒有用纹因，我認(rèn)為是有用的∨缥荩現(xiàn)在我從原理上給大家分析一下為什么這個方法有用。首先當(dāng)用戶打開一個鏈接的時候瞭恰，瀏覽器首先先去代理服務(wù)器查看鏈接是否有緩存屯曹。如果有就返回。沒有就去DNS服務(wù)器解析域名惊畏，得到服務(wù)器的IP地址是牢。然后通過TCP/IP三次握手建立HTTP鏈接。服務(wù)器收到請求才把客戶端請求的html代碼返回給客戶端瀏覽器陕截。瀏覽器解析html代碼渲染驳棱，解析的時候發(fā)現(xiàn)有CSS,JS文件要引入。就需要再次去服務(wù)器獲取代碼农曲，因為生成的JS/CSS文件加了時間戳的文件名社搅，請求的時候檢測緩存的時候是沒有的驻债，所以就直接去服務(wù)器從新獲取。避免了代碼更新的緩存問題形葬。當(dāng)然代碼更新過后合呐，還是要在鏈接后加隨機(jī)字符串，這樣用戶進(jìn)去就不會遇到緩存笙以。
