最近开发的微信公众号项目中 (项目采用 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 中配置, 如下图所示:
解决该问题的过程是非常痛苦的, 顾以此文记录, 以示我们踩过的坑.
参考
我想转行之 ---- 微信浏览器缓存 https://www.jianshu.com/p/cce9511c0914
微信页面入口文件被缓存解决方案 https://segmentfault.com/a/1190000016564212
IIS7.0 及 IIS8.0 添加 Vary 头和 expires 头
来源: https://www.cnblogs.com/xyb0226/p/11039033.html