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


Posted in Javascript onJune 17, 2019

最近开发的微信公众号项目中(项目采用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项目)

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

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

总结

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

Javascript 相关文章推荐
javascript中的prototype属性实例分析说明
Aug 09 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
通过说明与示例了解js五种设计模式
Jun 17 #Javascript
简单了解vue.js数组的常用操作
Jun 17 #Javascript
送你43道JS面试题(收藏)
Jun 17 #Javascript
通过实例学习React中事件节流防抖
Jun 17 #Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 #Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 #Javascript
通过js给网页加上水印背景实例
Jun 17 #Javascript
You might like
php实例分享之mysql数据备份
2014/05/19 PHP
php简单防盗链实现方法
2015/07/29 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
Python Tkinter实现简易计算器功能
2018/01/30 Python
pygame实现简易飞机大战
2018/09/11 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
自荐信格式的六要素
2013/09/21 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
自我鉴定总结
2014/03/24 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
红旗渠导游词
2015/02/09 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
小学语文国培研修日志
2015/11/13 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书