解决vue前端发版后要刷新才能看到更新的问题

前端在开发应用的时候，合理利用缓存可提高应用性能。但有些缓存会给我们带来困扰，比如前端每次发版，浏览器存在缓存要刷新才能看到更新，这种体验很不好。针对这个问题我总结了两种有效方案。

一、meta标签处理

vue-cli里的默认配置，css和js的名字都加了哈希值，所以新版本css、js和就旧版本的名字是不同的，不会有缓存问题。关键在于index.html文件它会被浏览器缓存。浏览器访问的还是旧的静态资源。解决办法如下，在meta标签禁止浏览器缓存 html

<meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

二、版本号 + 定时器

每次发版都应该有个版本号，很多开发者忽略了这个问题。这里我就用大白话说下我的思路。发版的时候我们把更新的版本号存放到静态文件中。然后定时用 ajax请求获取这个静态文件的版本号。最后跟浏览器内存中的版本号进行对比，如果不一致则说明有更新。js执行刷新页面。

// 定时获取版本号
setInterval(() => {
    checkUpdate()
}, 6000)

function checkUpdate() {
    axios
    .get(`/getVersion?timestamp=${Date.parse(new Date())}`)
    .then(function(response) {
        // 判断版本号是否与本地一致
        if (response.version != localStorage.getItem('version')) {
        localStorage.setItem('version', response.version)
        location.reload()
        } else {
        //版本号一致不做处理
        console('版本号一致不做处理')
        }
    })
    .catch(function(error) {
        console.log(error)
    })
}