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


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

    解决方案:

    服务端支持:
    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);
    }
  • 相关阅读:
    word批量打印工具,c#写的
    word添加页眉脚和设置各页不同的页眉页脚.
    打印机双面打印
    ORACLE OCP认证
    基于.net程序,使用cefsharp开发的打开网页工具,如何不加载图片
    在iis上运行的服务器端程序,运行一段时间后,访问都只出现一行乱码,回收进程池后又好了,求大神回复
    ArcGis API for JavaScript 开发笔记一 加载地图
    修改现有消息类让.net core项目支持Protobuf
    结合现有分布式系统的数据一致性思考
    让现有vue前端项目快速支持多语言
  • 原文地址:https://www.cnblogs.com/jcxfighting/p/12872490.html
Copyright © 2020-2023  润新知