[JavaScript知识库]vue项目版本更新用户页面缓存

1，public目录下新建version文件

2，修改vue.config.js

const { defineConfig } = require('@vue/cli-service')
const timeStamp = new Date().getTime()
module.exports = defineConfig({
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
     
      config.mode = 'production'
      return {
        output: { // 为生产环境修改配置...新增加
          filename: `js/[name].${timeStamp}.js`,
          chunkFilename: `js/chunk.[id].${timeStamp}.js`,
        },
      }
    }
  }
})

3，在恰当的时机，触发版本判断

a, app.vue onMounded

b, router.js router.beforeEach 路由守卫内

c, 其他请求内，比方说想做实时跟新，在某个请求，或者某个请求状态后

4，使用方式

import axios from "axios";
// 请求拿到线上文件数据
axios.get('/version.json')
          .then(res => {
            if (res.status !== 200) {return;}
            let newestVersion = res.data
            let localVersion = localStorage.getItem('version') || '{"version": ""}'
            localVersion = JSON.parse(localVersion)
            localStorage.setItem('version', JSON.stringify(newestVersion)) //先把新的覆盖本地存储
            //判断本地存在 并且与线上不一致 重新加载
            if (localVersion.version && (localVersion.version !== newestVersion.version)) {
              window.location.reload()
            }

          })
          .catch(() => {})
//本凸这里用的axios

如果有不足的 随时指出，本凸看见了就改