解决微信浏览器缓存站点入口文件(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 到 JQuery (1)学习小结
Feb 12 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
JS实现拼图游戏
Jan 29 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/07/23 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php常用文件操作函数汇总
2014/11/22 PHP
php中session与cookie的比较
2015/01/27 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
Python 如何创建一个线程池
2020/07/28 Python
Python字典实现伪切片功能
2020/10/28 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
super()与this()的区别
2016/01/17 面试题
介绍一下sql server的安全性
2014/08/10 面试题
百货商场楼层班组长竞聘书
2014/03/31 职场文书
保健品市场营销方案
2014/03/31 职场文书
信息工作经验交流材料
2014/05/28 职场文书
撤诉书怎么写
2015/05/19 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB