vue增加強(qiáng)緩存和版本號(hào)的實(shí)現(xiàn)方法
強(qiáng)緩存：
到底什么是強(qiáng)緩存？強(qiáng)在哪？其實(shí)強(qiáng)是強(qiáng)制的意思。當(dāng)瀏覽器去請(qǐng)求某個(gè)文件的時(shí)候，服務(wù)端就在respone header里面對(duì)改文件做了緩存配置。緩存的時(shí)間、緩存類型都由服務(wù)端控制。
強(qiáng)緩存實(shí)現(xiàn)：
cache-control: max-age=315360000, public ,immutable
客戶端和代理服務(wù)器都可以緩存該資源，在315360000秒（10年）的有效期內(nèi)，如果有請(qǐng)求該資源的需求的話就直接讀取緩存,statu code:200 ，即使用戶做了刷新操作，也不向服務(wù)器發(fā)起http請(qǐng)求
參考文章"徹底弄懂強(qiáng)緩存與協(xié)商緩存"
index.html文件采用協(xié)商緩存，理由就是要用戶每次請(qǐng)求index.html不拿瀏覽器緩存，直接請(qǐng)求服務(wù)器，這樣就保證資源更新了，切記不要設(shè)置強(qiáng)緩存?。?！
其他資源采用強(qiáng)緩存 + 協(xié)商緩存,理由就不多說(shuō)了。
nginx配置
版本號(hào)管理在
.env.production 生產(chǎn)模式
.env.test 測(cè)試模式
VUE_APP_VERSION = T0.01 測(cè)試模式 VUE_APP_VERSION = V0.01 生產(chǎn)模式
在package.json配置了打包命令
npm run build 正式環(huán)境配V0.01版本號(hào) npm run build:test 測(cè)試環(huán)境配T0.01版本號(hào)
通過(guò)webpack打包設(shè)置，name+版本號(hào)+時(shí)間戳.js
可以根據(jù)服務(wù)器設(shè)置強(qiáng)緩存，緩存靜態(tài)文件
configureWebpack: {
output: { // 輸出重構(gòu) 打包編譯后的 文件名稱 【模塊名稱.版本號(hào).時(shí)間戳】
filename: `[name].${process.env.VUE_APP_VERSION}.${timeStamp}.js`,
chunkFilename: `[name].${process.env.VUE_APP_VERSION}.${timeStamp}.js`,
},
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決Vue+Electron下Vuex的Dispatch沒(méi)有效果問(wèn)題
這篇文章主要介紹了Vue+Electron下Vuex的Dispatch沒(méi)有效果的解決方案 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
Vue實(shí)例創(chuàng)建和掛載的詳細(xì)過(guò)程
在 Vue.js 中,實(shí)例的掛載是一個(gè)非常重要的過(guò)程,它決定了 Vue 實(shí)例如何與 DOM 進(jìn)行交互,通過(guò)分析 Vue 源碼,特別是 Vue 的構(gòu)建函數(shù)和生命周期,我們可以了解掛載過(guò)程的詳細(xì)步驟,需要的朋友可以參考下2024-11-11
詳解如何創(chuàng)建并發(fā)布一個(gè) vue 組件
這篇文章主要介紹了詳解如何創(chuàng)建并發(fā)布一個(gè)vue組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
使用vue-aplayer插件時(shí)出現(xiàn)的問(wèn)題的解決
這篇文章主要介紹了使用vue-aplayer插件時(shí)出現(xiàn)的問(wèn)題的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了vue?實(shí)現(xiàn)手動(dòng)分割日期，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue.js頁(yè)面中有多個(gè)input搜索框如何實(shí)現(xiàn)防抖操作
debounce是lodash工具庫(kù)中的一個(gè)非常好用的函數(shù)。這篇文章主要介紹了Vue.js頁(yè)面中有多個(gè)input搜索框如何實(shí)現(xiàn)防抖操作,需要的朋友可以參考下2019-11-11
本文主要介紹了vue 面包屑導(dǎo)航組件封裝，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
下面小編就為大家分享一篇vue.js select下拉框綁定和取值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目打包與上線的相關(guān)資料,在項(xiàng)目完成得差不多得時(shí)候,就可以開始打包部署了,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Vue項(xiàng)目獲取url中的參數(shù)(親測(cè)可用)
這篇文章主要介紹了Vue項(xiàng)目獲取url中的參數(shù)，本文通過(guò)兩種情況分析給大家詳細(xì)介紹，感興趣的朋友一起看看吧2022-08-08