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

最近开发的微信公众号项目中(项目采用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项目)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • Adnroid 微信内置浏览器清除缓存

    微信开发比较头疼的一个情况就是缓存难以清除,然而奇怪的是微信app在IOS中是可以刷新页面的,但是Android中却不知道基于什么考虑,无法清除缓存也没有刷新功能,这个就给开发者设置了不小的障碍,哪有页面是最好就不改的,然后如果去改,微信浏览器缓存着css.图片,这样改完后看效果就变得相对费劲了.       我上网查过,遇到这个蛋疼问题的不止我一个,寻寻觅觅却找不到解决办法的也不止我一个,有人说去微信"设置"."通用"中"清除微信存储空间",我

  • iOS微信浏览器回退不刷新实例(监听浏览器回退事件)

    iOS在微信浏览器回退是不重新加载页面的,有些时候是需要重新加载的,所以需要监听回退事件 $(function(){ pushHistory(); }); function pushHistory(){ window.addEventListener("popstate", function(e){ alert("回退!"); //window.history.back(); //在历史记录中后退,这就像用户点击浏览器的后退按钮一样. //window.histor

  • PHP判断是手机端还是PC端 PHP判断是否是微信浏览器

    本文实例为大家分享了PHP判断的两个实例,一是PHP判断是手机端还是PC端,二是PHP判断是否是微信浏览器,供大家参考,具体内容如下 1.判断是否是手机端 function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset($_SERVER['HTTP_X_WAP_PROFILE'])) { return true; } // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息 if (isset($_SERVER['H

  • 解决微信内置浏览器返回上一页强制刷新问题方法

    微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置. BINGO~ 通过HTML5的history API + 缓存可以做到这一点. 执行原理: 1.0.通过history API的 history.pushState或 history.replaceState 保存AJAX状态: 2.0.同时将AJAX获取到的数据缓存起来(可以考虑使用H5的

  • JavaScript 监控微信浏览器且自带返回按钮时间

    比如现在有一个操作 是 A->B->C->B 在B页面的返回键 第一次返回的是C 如果想直接返回A或者其他地方 则需要触发返回事件 pushHistory(); window.addEventListener("popstate", function(e) { //alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 window.location = 'http://www.baidu.com'; }, false

  • 微信浏览器弹出框滑动时页面跟着滑动的实现代码（兼容Android和IOS端）

    在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动. 我觉得这个问题用的是下面这几行代码: var $body = $('body'), dialogIsInView = !1,//当前是不是对话框 lastContentContainerScrollTop = -1,//用于弹出框禁止内容滚动 $contentContainer = $('#content-container');//内容容器 //阻止Window滚动 function stopWindowScroll() {

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

    最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-index.html,顾之前版本的index页面找不到对应的js,因为我们每次发布会将之前的版本放至另外的备份目录),但关闭网页再次去打开又是正常的.最初开发内部测试时该问题没有引起关注,因为开发人员大部分都是android的手机,后来测试发现,某些android机型不是必现此问题,但是苹果(IOS)机

  • nginx 部署 vue 项目找不到js css文件的解决方法

    很多时候 npm run build 之后, index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件. vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容: ... module.exports = { baseUrl: isProd ? '/

  • windows系统IIS部署Django项目的实践

    windows系统IIS部署Django项目的实践

    目录 一.PythonWSGI部署原理 二.准备部署环境 三.安装和配置IIS 四.开放端口 五.本地部署 六.问题 采用IIS服务器部署相比django提供的开发者服务器具有更好的并发访问能力,性能更加稳定. 一.Python WSGI部署原理 python web项目的部署的基本原理,是基于一种WSGI的框架协议. WSGI协议主要包括Web服务器和应用服务器两部分. (1)Web服务器:即HTTP服务器,按照HTTP接受用户HTTP请求并提供并发访问,调用Web应用处理业务逻辑. (2)P

  • 五步教你用Nginx部署Vue项目及解决动态路由刷新404问题

    目录 步骤一:改端口 步骤二: 打包 步骤三:将dist文件夹上传到服务器上 步骤四:修改nginx.conf(重中之重) 步骤五:重启nginx 总结 期末月前本来部署过一次,昨天部署的时候发现又给忘了,而且出了很多问题,在这统一汇总一下. 步骤一:改端口 在vue.config.js下的devServer把host改成服务器的地址 步骤二: 打包 用npm run build打包,最后是这样的,并且目录下多了个dist文件夹 步骤三:将dist文件夹上传到服务器上 我用的xshell,没办法

  • 解决微信浏览器Javascript无法使用window.location.reload()刷新页面

    场景是这样子的,页面在初始化时有一个ajax请求,在页面上有一个按钮,点击的时候执行window.location.reload(),正常情况reload()后页面依然会向后台发出请求,但在安卓的微信浏览器中reoad后请求的一直是第一次打开页面时请求的数据.可以理解为请求被缓存了,但没有实测,也不知道是否是缓存. 解决方法是,使用window.location.href="window.location.href+随机数" 代替 window.location.reload().切记

  • Vue SPA 如何解决浏览器缓存问题

    目录 Vue SPA 解决浏览器缓存 Vue 微信浏览器缓存问题 Vue SPA 解决浏览器缓存 如何让发布到线上的 vue 单页应用能及时更新到浏览器,而无需用户强制刷新页面呢? 因为 js.css.图片等资源文件名带有 hash 值,只要文件名变了就会更新,所以可以设置缓存,但 html 文件名没有加 hash 值,所以不能缓存该文件. 在 nginx.conf 中设置         location / {             root html/dist;            

  • electron-vue利用webpack打包实现多页面的入口文件问题

    项目需要在electron的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验. 1.webpack的核心概念 •Entry:入口,Webpack执行构建的第一步从Entry开始: •Module:模块,在Webpack里一切皆模块,一个模块对应着一个文件.Webpack会从配置的Entry开始递归找出所有依赖的模块. •Chunk:代码块,一个Chunk由多个模块组

  • Vue项目导入导出文件功能以及导出文件后乱码问题及解决

    Vue项目导入导出文件功能以及导出文件后乱码问题及解决

    目录 vue项目导入导出功能 1.导出 2.导入 3.另一种方法实现文件上传 vue项目导入导出功能 1.导出 导出功能其实很简单,只需要调用后端的接口即可,不过有一些需要注意的地方,具体代码如下所示: 这是导出按钮,定义导出的点击事件: <a-button type="primary" @click="downExcel"> <template #icon> <UploadOutlined /> </template>

  • 浅谈微信页面入口文件被缓存解决方案

    缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,比如新版本发布之后,怎么替换客户端上的缓存文件呢?大家一般的的解决方案主要有以下几种形式, 一般情况 1.添加版本号,在静态资源文件的引用链接后面添加版本号,这样每次发布的时候更新版本号,就能让叫客户端加载新的资源文件,避免再次使用缓存的老文件,如 <script src="//m.test.com/build/activity/js/commons.js?v=20170608"></script

  • 关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

    前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML <input type="file" id="choose" capture="camera" accept="image/*"> JavaScript var filechooser = document.getEleme

随机推荐