提示你的用户正在使用缓存页面，并告知用户刷新缓存

提示你的用户正在使用缓存页面，并告知用户刷新缓存实现方案

服务器端配置

保存配置文件（/var/www/www.yoursite.com/files/updat…www.yoursite.com/files/updat…

{
  lastClientVersion: '1.1.2'
}

配置 Nginx update.json不使用缓存

location /files/update.json {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
    root /path/to/your/website;
}

前端配置

配置文件（config/index.js）

const config = {
  currentClientVersion: '1.1.1'
}
export default config

请求和对比版本的方式（component/VersionCheck.vue）

<script>
  import { onMounted } from 'vue'
  import axios from 'axios'
  import Config from '../config/index.js'
  
  const compairVersion = () => {
    axios.get('https://www.yoursite.com/files/update.json').then((res) => {
      const { lastClientVersion } = res.data.data
      const lastClientVersionArr = lastClientVersion.split('.')
      const needUpdate = Config.currentClientVersion.split.some((value, index) => (+value) < lastClientVersionArr[index])
      if (needUpdate) alert(`你当前使用的是缓存页面，当前版本为${Config.currentClientVersion}，最新版本为${lastClientVersion}`)
  })
}
  
onMounted(() => {
  compairVersion()
})
</script>

服务器端配置文件的更新

当客户端更新为1.1.2的时候，登录到服务器修改配置文件为1.1.2即可

缓存逻辑的判断

当最新的客户端和服务端都更新为1.1.2的时候，如果用户访问了缓存的1.1.1的缓存的时候，会提示用户当前是缓存页面

为什么不直接配置nginx让首页不使用缓存

客户端还是需要用缓存来提高访问速度的，但是当版本更新了就不应该使用缓存的页面了，因此当页面使用旧版本的缓存的时候出现了页面是缓存的提示，并且提示了当前版本号和最新的版本号