vue單頁面網頁端
專案前言（快取）
專案之前已經通過webpack打包的時候都會把靜態資源檔案名加個哈希后綴，且index.html中引入的時候也加了相應的哈希后綴，這樣每次打包都會是最新的，index.html檔案也通過Nginx添加了不快取配置
場景需求
已經上線的專案要配合后端更新前端邏輯、修改某個功能，
根據前面的說的客戶新進入的不用考慮肯定是最新的代碼，問題就出現在正在使用網站的用戶代碼沒有更新過來，
方法
簡單粗暴讓用戶客戶端重繪頁面，分享三種用過的方法
websocket
- 原理：使用WebSocket跟服務端建立連接，接收到來自服務端的訊息，每次更新后讓后端修改版本號，跟本地cookie版本號對比從而判斷是否重繪頁面或者還有其他操作，
計時器回圈請求介面
- 原理：每次更新后讓后端修改版本號，axios請求獲取版本號的介面回傳版本號跟本地cookie版本號對比判斷是否重繪頁面并隔相應秒數后再請求，
前端計時器對比index.html差別（只需前端）
- 原理：請求網站根頁面index.html 回傳最新index.html頁面內容，再使用md5獲取當前index.html的數字簽名跟本地cookie進行對比就可以進行相應的操作判斷
結語
其實還可以針對build后在webpack里的configureWebpack搞自己的插件或者push倉庫后自動更新里多加一個修改版本號的操作，針對后端比較忙/懶的情況下建議還是自己搞比較爽，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/353327.html
標籤：其他