如何解決微信瀏覽器緩存站點(diǎn)入口文件的問題-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)如何解決微信瀏覽器緩存站點(diǎn)入口文件的問題的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的余姚網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

最近開發(fā)的微信公眾號項(xiàng)目中(項(xiàng)目采用Vue + Vux 構(gòu)建，站點(diǎn)部署在IIS8.5上)，遇到個(gè)非常奇葩的問題，發(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文件，所以一開始的解決方向就是錯(cuò)誤的，導(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ù)了前一種方案的錯(cuò)誤思路，認(rèn)為是瀏覽器緩存了某些js文件，由于js文件找不到報(bào)錯(cuò)，導(dǎo)致頁面空白。想要通過路由的hash模式 + 文件的版本號，來解決此問題。因?yàn)槲覀兊捻?xiàng)目是采用的history模式(微信授權(quán)和站點(diǎn)部署在IIS某個(gè)子目錄下的原因)。

后來驗(yàn)證這是完全的錯(cuò)誤思路，失敗次數(shù)2。

3. 路由跳轉(zhuǎn)前攔截處理#

嘗試此方案的時(shí)候，已經(jīng)知曉產(chǎn)生該問題的原因，是由于微信瀏覽器緩存了入口文件(index.html),是想嘗試在訪問某個(gè)頁面時(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中配置, 如下圖所示:

感謝各位的閱讀！關(guān)于“如何解決微信瀏覽器緩存站點(diǎn)入口文件的問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章名稱：如何解決微信瀏覽器緩存站點(diǎn)入口文件的問題-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://muchs.cn/article38/cspspp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、定制網(wǎng)站、品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)