解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

微信(小程序)  /  管理员 发布于 5年前   601

最近开发的微信公众号项目中(项目采用Vue + Vux 构建，站点部署在IIS8.5上)，遇到个非常奇葩的问题，发布站点内容后，通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-index.html,顾之前版本的index页面找不到对应的js，因为我们每次发布会将之前的版本放至另外的备份目录)，但关闭网页再次去打开又是正常的。最初开发内部测试时该问题没有引起关注，因为开发人员大部分都是android的手机，后来测试发现，某些android机型不是必现此问题，但是苹果(IOS)机型，每次都是必然发生。

百度千百回#

在客户反馈此问题后，如噩梦般的探索解决过程就此开始了。因为在开发机器上根本无法测试，每次都必须打包发布。并且，在问题发生后，团队内部最初讨论并不认为是缓存了站点的入口文件(某些android机型不会发生此现象)，而是缓存了其他js文件，所以一开始的解决方向就是错误的，导致浪费了很多时间。

1. Vue项目打包发布时，文件加上版本号#

其实在用vue-cli 3.0脚手架构建的Vue项目，打包过程中输出的静态文件名已经做了hash处理， webpack.prod.conf.js 中配置如下:

output: {  path: config.build.assetsRoot,  filename: utils.assetsPath('js/[name].[chunkhash].js'),  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') },

但我们还是尝试在此处加上时间戳，如:

'js/[id].[chunkhash]'+ new Date().getTime() +'.js'

结果是此方案没有生效，失败次数1。

2. 尝试将Vue-Router 的history模式改为hash模式#

这种思路，还是延续了前一种方案的错误思路，认为是浏览器缓存了某些js文件，由于js文件找不到报错，导致页面空白。想要通过路由的hash模式 + 文件的版本号，来解决此问题。因为我们的项目是采用的history模式(微信授权和站点部署在IIS某个子目录下的原因)。

后来验证这是完全的错误思路，失败次数2。

3. 路由跳转前拦截处理#

尝试此方案的时候，已经知晓产生该问题的原因，是由于微信浏览器缓存了入口文件(index.html),是想尝试在访问某个页面时,先执行跳转至加了版本号的index页面。具体实现思路:

router.beforeEach((to, from, next){  // 实现某些跳转逻辑}

因为最终的尝试失败了，这里就不再撰述逻辑，失败次数3。

4. 给微信公众号菜单链接加上特定版本号#

该方案只能是用于临时解决，内部做调测还可以，但如果用于正式生产环境，会非常麻烦，需要每次发布更新后，都去更改微信公众号的菜单链接。如下引用所示，在链接上加版本号:

http://yqwx.xx.com/index.html?vt=1234

因为这种方案，几乎不可能用于生产环境，失败次数4.

5. 尝试将站点部署到nginx上#

我们的项目是部署在IIS上的，但百度“微信浏览器缓存入口文件”问题，几乎所有文章中提到的网站都是部署在nginx上,有些解决此问题的方案，都是设置nginx，如以下几篇参考文中所例的设置:

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, 不过受项目其他因素影响，后来放弃了此方案，失败次数5。

蓦然回首，它在此处#

虽然以上几种解决方案的尝试，都以失败告终，但至少我们知晓了造成该问题的原因是由于微信浏览器缓存了站点入口文件(index.html)，并尝试去从Web服务器(IIS)的配置去解决(因为在nginx上可以设置某些缓存，那么在IIS上应该也是可以的)。

最终的解决方案非常简单的，简单到我们都怀疑人生，哈哈。

在IIS中配置, 如下图所示:

解决该问题的过程是非常痛苦的，顾以此文记录，以示我们踩过的坑。

总结

以上所述是小编给大家介绍的解决微信浏览器缓存站点入口文件(IIS部署Vue项目)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

• Vue项目全局配置页面缓存之按需读取缓存的实现详解
• vue项目优化之通过keep-alive数据缓存的方法
• vue移动端项目缓存问题实践记录
• vue项目动态设置页面title及是否缓存页面的问题
• vue项目中实现缓存的最佳方案详解