解决微信浏览器缓存站点入口文件(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 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
JS实现商品筛选功能
Aug 19 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
JavaScript多种图形实现代码实例
Jun 28 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模板技术原理【一】
2008/01/10 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
JavaScript 动态改变图片大小
2009/06/11 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
python 利用zmail库发送邮件
2020/09/11 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
新文化运动的基本口号
2014/06/21 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
工伤事故证明
2014/10/20 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
2019新员工心得体会
2019/06/25 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
一行Python命令实现批量加水印
2022/04/07 Python
Python之matplotlib绘制折线图
2022/04/13 Python