关于Vue动态更新版本的一些问题记录

最近开始用Vue升级了之前的一些项目(没办法,开始写前端了。相比较后端逻辑那种冥思苦想,前端写起来更加“视觉系”)

很自然地,觉得前端也应该和之前写服务器端页面一样,只要文件更新了,用户端自然就更新了,然后很自然地,踩到了坑里。

一开始也是通过学习别人的代码,在router的beforeEach钩子函数里,通过检查版本文件来决定是否应该重新加载页面。

由于有些js文件在bundle中被按需加载。当更新代码时(我用的方式就是简单粗暴地替换dist中的所有文件到服务器),由于某些之前没有加载到的文件已经不存在了,会报:’Loading chunk ” + xx + ” failed’。

但是之前的疏忽,没有在检查版本文件时增加随机数来避免文件被缓存,结果用户端的缓存中,依然是旧版本的代码、以及旧版本的“版本检查代码”。所以单纯的在新代码中增加随机数,并不能确保用户端能够获取到新的版本文件。

这个时候只能通过在nginx中,增加对版本文件单独的禁用缓存配置:

location ~ /version\.json {
    expires 0;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate';
}

这样可以确保之前的用户浏览器再次获取版本文件时拿到的是最新的,但是还是怀疑某些浏览器不会做这个检查,这种情况只能寄希望于缓存过期了。

同时,给index.html也加上禁用缓存的配置。确保index.html每次都获取最新的。

不过,这种配置貌似对PWA有影响,因为PWA的一个最重要的特性就是缓存所有的逻辑,改天研究一下。