解决微信浏览器缓存站点入口文件(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 相关文章推荐
jQuery中读取json文件示例代码
May 10 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 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
与数据库连接
2006/10/09 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
帝国cms常用标签汇总
2015/07/06 PHP
asp.net和php的区别点总结
2019/10/10 PHP
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
JavaScript中的闭包
2016/02/24 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
matplotlib绘制动画代码示例
2018/01/02 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
迎元旦广播稿
2014/02/22 职场文书
大学应届生的自我评价
2014/03/06 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
党小组考察意见
2015/06/02 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL