侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

微信(小程序)  /  管理员 发布于 3年前   313

最近开发的微信公众号项目中(项目采用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中配置, 如下图所示:

http响应头

http响应标头

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

总结

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

您可能感兴趣的文章:

  • Vue项目全局配置页面缓存之按需读取缓存的实现详解
  • vue项目优化之通过keep-alive数据缓存的方法
  • vue移动端项目缓存问题实践记录
  • vue项目动态设置页面title及是否缓存页面的问题
  • vue项目中实现缓存的最佳方案详解


  • 上一条:
    微信小程序实现日期格式化和倒计时
    下一条:
    小程序click-scroll组件设计
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • windows系统中安装FFMpeg及在phpstudy环境php7.3 + php-ffmpeg扩展的使用流程步骤(0个评论)
    • 在go语言中对浮点的数组、切片(slice)进行正向排序和反向排序(0个评论)
    • 在go语言中对整数数组、切片(slice)进行排序和反向排序(0个评论)
    • 在go语言中对字符串数组、切片(slice)进行排序和反向排序(0个评论)
    • 最新国内免注册ChatGPT体验站_ChatGPT镜像站访问链接地址2023/3/28持续更新(0个评论)
    • 在Laravel项目中的实现无密码认证之:发送邮箱链接授权(0个评论)
    • 在go语言中使用GoRoutines实现高性能并发批量调用api示例(0个评论)
    • Docker撤回受争议的收费方案,又可以继续使用docker了(0个评论)
    • 在go语言生成唯一ID之SnowFlake算法(0个评论)
    • ChatGPT再出新功能,推出插件功能,能联网、搜索了(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客