解决微信浏览器缓存站点入口文件(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
猜你喜欢
- 池化层定义在tensorflow/python/layers/pooling.py.有最大值池化和均值池化。1、tf.layers.max_
- python 代码如下:# -*- coding:utf-8 -*-import pandas as pdimport pymysqlimp
- Locate函数主要的作用是判断一个字符串是否包含另一个字符串,如Locate(str,sub) > 0,表示sub字符串包含str字
- 目录一、变量、常量的区别二、变量1. Python中的变量不需要声明类型2. 用“=”号来给变量赋值3. 赋值4. 变量5. “=”6. P
- 这篇文章主要介绍了Python监控服务器实用工具psutil使用解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习
- 工作中需要根据某个应用程序具体吃了多少内存来决定执行某些操作,所以需要写个小工具来模拟应用程序使用内存情况,下面是我写的一个Python脚本
- code如下: /*! *author:sohighthesky *blog:http://www.cnblogs.com/sohighth
- 相比于原生的python开发核心包,Anaconda已经集成了许多的第三方库,但是这在实际应用中是远远不够的,因此我们需要手动安装第三方库使
- 一、动机(Motivate)在软件构建过程中,某些对象使用的算法可能多种多样,经常改变,如果将这些算法都编码到对象中,将会使对象变得异常复杂
- 我大概思考了下有如下几种方法可以解决: 1.在图片服务器上开通FTP,人为添加图片地址即可,但不方便,特别是在可视编辑器中看图还的多一部操作
- 在图片处理中,霍夫变换主要是用来检测图片中的几何形状,包括直线、圆、椭圆等。在skimage中,霍夫变换是放在tranform模块内,本篇主
- Group By分组后选取每组最新的一条数据问题group by语句只会展示一条数据,而且很多时候并不会展示我们想要的数据,如何解决呢首先我
- 很多序列的方法字符串同样适用,但是,字符串是不可变的,所以一些试图改变字符串的方法是不可用的1 字符串格式化1)用元组或者字典格式化字符串f
- 本文实例讲述了mysql语句实现简单的增、删、改、查操作。分享给大家供大家参考,具体如下:1、创建db_shop数据库,如果该数据库不存在则
- 先看看关于call()的官方解释,“调用一个对象的一个方法,以另一个对象替换当前对象。”,看了这样的解释,或许让你更摸不着头脑了。看例子:v
- 用比较笨的方法来做abc ="AlkjA;lkjlkjAlkAkjAlkjAAAA" if instr(abc,&quo
- 介绍本篇文章主要介绍如何爬取麦子学院的课程信息(本爬虫仍是单线程爬虫),在开始介绍之前,先来看看结果示意图怎么样,是不是已经跃跃欲试了?首先
- 一、固定费用问题案例解析1.1、固定费用问题(Fixed cost problem)固定费用问题,是指求解生产成本最小问题时,总成本包括固定
- 查询学生步骤1:设置导航 步骤2:添加路由步骤3:创建页面步骤:步骤1:准备2个变量(pageInfo、studentVo)步骤2
- 视图(View)“视图”主要指我们送到Web浏览器的最终结果??比如我们的脚本生成的HTML。当说到视图时,很多人想到的是模版,但是把模板方