解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
作者:返回主页 沉淀的风 发布时间:2024-05-13 10:40:00
最近开发的微信公众号项目中(项目采用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项目),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
来源:https://www.cnblogs.com/xyb0226/p/11039033.html
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- SUBSTRING 返回字符、binary、text 或 image 表达式的一部分。有关可与该函数一起使用的有效 Microsoft&am
- 来自Six Revisions的一篇文章,作者对一些主流的浏览器进行了测试比较,测试主要针对以下几个方面进行:1.JavaScript执行速
- 一、什么是索引 减少磁盘I/O和逻辑读次数的最佳方法之一就是使用【索引】 索引允许SQL Server在表中查找数据而不需要扫描整个表。 1
- asp之家注:防止表单重复提交的方法,在客户端其实很容易实现,只要使用js让用户第一次点击提交按钮后,把提交按钮设置为disabled,这样
- 介绍在本文中,云朵君将和大家一起了解装饰器的工作原理,如何将我们之前定义的定时器类 Timer 扩展为装饰器,以及如何简化计时功能。最后对
- SQL Server中事务日志的作用:持续记录数据库所有的事务和这些事务对数据库所做的修改;一旦数据库出现灾难事件,就需要事务日志来进行近期
- 一般情况下会有几种情况需要你把数据库设为只读: 1. Insert,Update,Delete 触发器 2. Check 约束 和 Dele
- 以下保存成 App.xml , 与asp文件放在相同目录下! 代码如下: <?xml version="1.0"
- 这篇文章主要介绍了如何基于python实现归一化处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友
- 在 Python 整型对象所存储的位置是不同的, 有一些是一直存储在某个存储里面, 而其它的, 则在使用时开辟出空间.说这句话的理由, 可以
- 使用SQL SERVER的[导入]功能,便可将access数据转换,但要注意原来的'自增字段'需要修改,将相应字段标识修改为
- Timer: 隔一定时间调用一个函数,如果想实现每隔一段时间就调用一个函数的话,就要在Timer调用的函数中,再次设置Timer。Timer
- 在我们平常使用Python进行数据处理与分析时,在import完一大堆库之后,就是对数据进行预览,查看数据是否出现了缺失值、重复值等异常情况
- pandas列转换为字典,但将相同第一列(键)的所有值合并为一个键形式一:import pandas as pd # datadata =
- Django中如何在Model保存前做一定的固定操作,比如写一句日志?关键词: 信号利用Django的Model的Signal Dispat
- 前言:在做一个商城项目的时候,需要实现商品搜索功能。说到搜索,第一时间想到的是数据库的 select * from tb_sku where
- 简述从官网下载了Python3.7.4,直接编译安装后,使用pip3出现了报错信息: Can't connect to HTTPS
- 在使用ASP来进行后端的数据合法性校验的时候,有些人为满足不同环境下面的数据校验,编写了很多的函数来实现,比如,我们想要校验用户输入的URL
- 在 Python 中是没有原生数据类型支持时间的,日期与时间的操作需要借助三个模块,分别是 time、datetime、calendar。t
- 如题,在控制台运行python manage.py startapp sales 建立一个应用报错异常1.应用名不能包含下划线等字符 所以a