前端页面部署之后更新缓存

前端页面部署更新之后，因为缓存问题，用户正在浏览的页面或者收藏夹中直接访问，页面在不刷新更新缓存的情况下，用户不知道页面是否有更新

解决方案：

服务端支持：
1.服务端给予一个版本号的返回接口，定时器轮询 时间长一些，询问是否更新
2.socket，推送消息
3.服务端做个中间件拦截用户一些请求，判断它携带的版本
不需要支持：
1.在编译的时候自己生成一个js文件，作为版本监控，然后前端用jsonp去请求这个js，判断是否有更新。

 

这里主要是前端不需要服务端支持的情况下

　　1.思路：在打包的时候，生成版本号，使用jsonp的方式请求获取版本号，

　　2.第二次有更新时，打包生成版本号与上一个版本进行对比，若不一样就提醒用户有更新，执行reload刷新页面，进而更新缓存

const fs = require('fs')
const path = require('path')
// 打包的时候生成版本号
if (isProduction) {
  var version1 = new Date().getTime()
  var content = "getVersion('" + version1 + "')"
    //打包之后的地址
  fs.writeFile(path.join(__dirname, `/public/common`) + "/version.js", content, function (err) {
    if (err) {
      return console.log(err);
    }
    console.log("The file was saved!");
  });
}

直接在main.js中引入js代码
import Vue from 'vue'

if (process.env.NODE_ENV === 'production') {
  setInterval(() => {
    // 重复创建script标签，先删除
    const preScript = document.getElementsByTagName("script")[0];
    const preSrc = preScript.src;
    const parentNode = preScript.parentNode
    if (preSrc.includes('version')) {
      parentNode.removeChild(preScript)
    }
    const versionScript = document.createElement("script");
    // todo 注意路径问题
    versionScript.src = '/openweb/common/version.js?v=' + new Date().getTime();
    const s = document.getElementsByTagName("script")[0];
    parentNode.insertBefore(versionScript, s); // 插入到head标签中 layout.js前

    window.getVersion = version => {
      if ((localStorage.frontendVersion && version !== localStorage.frontendVersion) || (window.frontendVersion && version !== window.frontendVersion)) {
        console.log('localStorage.frontendVersion', localStorage.frontendVersion);
        console.log('version', version);
        Vue.prototype.$confirm({
          title: '页面有更新，确定要更新吗？',
          onOk() {
            location.reload()
          },
          onCancel() {},
        });
      }
      localStorage.frontendVersion = version; // 保存 以便下次使用判断
      window.frontendVersion = version; // 保存 以便下次使用判断
    }

  }, 10000);
}