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

在最近开发的微信微信官方账号项目中(项目由Vue Vux搭建，站点部署在IIS8.5上)，出现了一个非常奇怪的问题。发布网站内容后，通过微信打开网站发现是一个空白页(后来核实门户文件-index.html被微信浏览器缓存，在上一版本的索引页上找不到对应的js，因为我们每次发布会都会把上一版本放在另一个备份目录下)，但关闭网页再打开是正常的。这个问题在内测刚开发的时候并没有引起重视，因为大部分开发者都是安卓手机。后来测试发现，有些安卓机型不一定有这个问题，但苹果(IOS)机型总是会发生。

百度千遍#

客户对此问题给出反馈后，噩梦探索和解决过程开始了。因为它根本不能在开发机上测试，所以每次都必须打包发布。而且问题发生后，团队内部最初的讨论并没有认为网站的门户文件被缓存了(这种现象在一些安卓机型中并没有出现)，而是缓存了其他js文件，所以最初的解决方向是错误的，造成了大量时间的浪费。

1.当vue项目打包发布时，将版本号#添加到文件中

实际上，在用vue-cli 3.0支架构建的Vue项目中，打包过程中输出的静态文件名经过哈希处理，webpack.prod.conf.js中的配置如下：

输出： {路径： config.build.assets根目录，文件名： utils.assets路径(' js/[name])。[区块哈希]。js ')，区块文件名： utils.assets路径(' js/[id]。[区块哈希]。js’)

' js/[id]的结果。[chunkhash]'新日期()。gettime()'。“js”是这个方案无效，失败次数是1。

2.尝试将Vue-Router的历史模式更改为哈希模式#

这个思路延续了之前方案的错误思路，认为浏览器缓存了一些js文件，页面是空白的，因为找不到js文件。我想通过路由哈希模式文件的版本号来解决这个问题。因为我们的项目采用了历史模式(微信授权和站点部署之所以在IIS的一个子目录中)。

后来验证这是完全错误的思维，失败次数为2次。

3.路线跳转前拦截#

我在尝试这个方案的时候就已经知道出现这个问题的原因是微信浏览器缓存了词条文件(index.html)，在访问某个页面的时候试图跳转到有版本号的索引页面。具体实施思路：

路由器。beforeeach ((to，from，next){//实现一些跳转逻辑}因为最后的尝试失败了，逻辑不会写到这里，失败的次数是3。

4.将特定版本号#添加到微信微信官方账号菜单链接

这个方案只能临时解决，做内部调整测试就可以了。但是如果用在正规的生产环境中，会很麻烦，每次更新发布后都要更换微信微信官方账号的菜单链接。如以下参考所示，将版本号：添加到链接中

http://yqwx.xx.com/index.html?vt=1234

由于这种方案，在生产环境中几乎无法使用，故障数为4。

5.尝试将站点部署到nginx #

我们的项目部署在IIS上，但是百度的“微信浏览器缓存入口文件”问题，文章中提到的网站几乎都部署在nginx上，这个问题的一些解决方案就是设置nginx，比如下面参考文章中的设置：

地点~* ^.\.(jpg | JPEG | gif | png | ico | CSS | js)$ { root/mnt/dat 1/test/tes-app；####删除缓存add _ header Last-Modified $ date _ GMT；add_header Cache-Control '无存储、无缓存、必须重新验证、代理重新验证、最大年龄=0 '；if _ modified _自关闭；到期关闭；etag关闭；}我们也尝试过安装nginx，但是由于项目中其他因素的影响，我们放弃了这个方案，失败了5次。

#回头看，它就在这里#

虽然以上解决方案都失败了，但至少我们知道造成这个问题的原因是微信浏览器缓存了站点入口文件(index.html)并试图从Web服务器(IIS)的配置上解决(因为有些缓存可以在nginx上设置，所以在IIS上应该是可以的)。

最后的解决方法太简单了，我们都怀疑人生，哈哈。

在IIS中配置，如下图：所示

解决这个问题的过程非常痛苦。以这篇文章为记录，展示我们踩过的坑。

摘要

以上是边肖介绍的微信浏览器缓存站点入口文件(IIS部署Vue项目)的解决方案。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！