解決微信瀏覽器緩存站點(diǎn)入口文件(IIS部署Vue項(xiàng)目)
最近開發(fā)的微信公眾號項(xiàng)目中(項(xiàng)目采用Vue + Vux 構(gòu)建,站點(diǎn)部署在IIS8.5上),遇到個非常奇葩的問題,發(fā)布站點(diǎn)內(nèi)容后,通過微信打開網(wǎng)址發(fā)現(xiàn)是空白頁面(后來驗(yàn)證是微信瀏覽器緩存了入口文件-index.html,顧之前版本的index頁面找不到對應(yīng)的js,因?yàn)槲覀兠看伟l(fā)布會將之前的版本放至另外的備份目錄),但關(guān)閉網(wǎng)頁再次去打開又是正常的。最初開發(fā)內(nèi)部測試時(shí)該問題沒有引起關(guān)注,因?yàn)殚_發(fā)人員大部分都是android的手機(jī),后來測試發(fā)現(xiàn),某些android機(jī)型不是必現(xiàn)此問題,但是蘋果(IOS)機(jī)型,每次都是必然發(fā)生。
百度千百回#
在客戶反饋此問題后,如噩夢般的探索解決過程就此開始了。因?yàn)樵陂_發(fā)機(jī)器上根本無法測試,每次都必須打包發(fā)布。并且,在問題發(fā)生后,團(tuán)隊(duì)內(nèi)部最初討論并不認(rèn)為是緩存了站點(diǎn)的入口文件(某些android機(jī)型不會發(fā)生此現(xiàn)象),而是緩存了其他js文件,所以一開始的解決方向就是錯誤的,導(dǎo)致浪費(fèi)了很多時(shí)間。
1. Vue項(xiàng)目打包發(fā)布時(shí),文件加上版本號#
其實(shí)在用vue-cli 3.0腳手架構(gòu)建的Vue項(xiàng)目,打包過程中輸出的靜態(tài)文件名已經(jīng)做了hash處理, webpack.prod.conf.js 中配置如下:
output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') },
但我們還是嘗試在此處加上時(shí)間戳,如:
'js/[id].[chunkhash]'+ new Date().getTime() +'.js'
結(jié)果是此方案沒有生效,失敗次數(shù)1。
2. 嘗試將Vue-Router 的history模式改為hash模式#
這種思路,還是延續(xù)了前一種方案的錯誤思路,認(rèn)為是瀏覽器緩存了某些js文件,由于js文件找不到報(bào)錯,導(dǎo)致頁面空白。想要通過路由的hash模式 + 文件的版本號,來解決此問題。因?yàn)槲覀兊捻?xiàng)目是采用的history模式(微信授權(quán)和站點(diǎn)部署在IIS某個子目錄下的原因)。
后來驗(yàn)證這是完全的錯誤思路,失敗次數(shù)2。
3. 路由跳轉(zhuǎn)前攔截處理#
嘗試此方案的時(shí)候,已經(jīng)知曉產(chǎn)生該問題的原因,是由于微信瀏覽器緩存了入口文件(index.html),是想嘗試在訪問某個頁面時(shí),先執(zhí)行跳轉(zhuǎn)至加了版本號的index頁面。具體實(shí)現(xiàn)思路:
router.beforeEach((to, from, next){ // 實(shí)現(xiàn)某些跳轉(zhuǎn)邏輯 }
因?yàn)樽罱K的嘗試失敗了,這里就不再撰述邏輯,失敗次數(shù)3。
4. 給微信公眾號菜單鏈接加上特定版本號#
該方案只能是用于臨時(shí)解決,內(nèi)部做調(diào)測還可以,但如果用于正式生產(chǎn)環(huán)境,會非常麻煩,需要每次發(fā)布更新后,都去更改微信公眾號的菜單鏈接。如下引用所示,在鏈接上加版本號:
http://yqwx.xx.com/index.html?vt=1234
因?yàn)檫@種方案,幾乎不可能用于生產(chǎn)環(huán)境,失敗次數(shù)4.
5. 嘗試將站點(diǎn)部署到nginx上#
我們的項(xiàng)目是部署在IIS上的,但百度“微信瀏覽器緩存入口文件”問題,幾乎所有文章中提到的網(wǎng)站都是部署在nginx上,有些解決此問題的方案,都是設(shè)置nginx,如以下幾篇參考文中所例的設(shè)置:
location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js)$ { root /mnt/dat1/test/tes-app; #### kill cache add_header Last-Modified $date_gmt; add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0'; if_modified_since off; expires off; etag off; }
我們也嘗試了安裝nginx, 不過受項(xiàng)目其他因素影響,后來放棄了此方案,失敗次數(shù)5。
驀然回首,它在此處#
雖然以上幾種解決方案的嘗試,都以失敗告終,但至少我們知曉了造成該問題的原因是由于微信瀏覽器緩存了站點(diǎn)入口文件(index.html),并嘗試去從Web服務(wù)器(IIS)的配置去解決(因?yàn)樵趎ginx上可以設(shè)置某些緩存,那么在IIS上應(yīng)該也是可以的)。
最終的解決方案非常簡單的,簡單到我們都懷疑人生,哈哈。
在IIS中配置, 如下圖所示:
解決該問題的過程是非常痛苦的,顧以此文記錄,以示我們踩過的坑。
總結(jié)
以上所述是小編給大家介紹的解決微信瀏覽器緩存站點(diǎn)入口文件(IIS部署Vue項(xiàng)目),希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時(shí)回復(fù)大家的!
相關(guān)文章
vue3+elementUI實(shí)現(xiàn)懸浮多行文本輸入框效果
這篇文章主要為大家詳細(xì)介紹了vue3如何引用elementUI實(shí)現(xiàn)懸浮文本輸入框效果,以便實(shí)現(xiàn)多行文本輸入,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10Vue中使用video.js實(shí)現(xiàn)截圖和視頻錄制與下載
這篇文章主要為大家詳細(xì)介紹了Vue中如何使用video.js實(shí)現(xiàn)截圖和視頻錄制與下載,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03Vue報(bào)錯:TypeError:Cannot create property '
這篇文章主要介紹了Vue報(bào)錯:TypeError:Cannot create property 'xxx' on string 'xxxx'問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08