vue项目解决缓存问题 ie缓存思路需要解决问题: 如何处理 vue 更新后, js 和 css 具有缓存问题 ,

思路

需要解决问题: 如何处理 vue 更新后, js 和 css 具有缓存问题 , 如何告知用户端我升级了. 如何控制那些该缓存那些不该缓存, 如何知道那些文件变了那些没有变.

思路:

vue打包的时候, 修改打包配置, 让打包后的文件名携带版本号, 以下是vue.config.js代码

// vue.config.js
configureWebpack: (config) => {
  config.output = {
    // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
    ...config.output,
    filename: `assets/js/[name].${version}.js`, // version想办法从配置文件中拿, 可以通过fs读文件
    chunkFilename: `assets/js/[name].${version}.js`,
  };
}

在 public 中放一个 version.js 文件, 每次去请求这个文件, 拿到版本号之后, 再去加载对应版本号的文件.

// 这段代码是打包后的index.html中的js
function createTag({ elementTag, src, type, rel, href, as }, actionFn) {
  let script = document.createElement(elementTag);
  type && (script.type = type); // "text/javascript"
  src && (script.src = src);
  rel && (script.rel = rel);
  href && (script.href = href);
  as && (script.as = as);
  document.getElementsByTagName("head")[0].appendChild(script);

  if (actionFn) {
    if (window.all) {
      // 对ie进行单独处理
      script.onreadystatechange = function () {
        if (
          script.readyStatus === "loaded" ||
          script.readyState === "complete"
        ) {
          // 执行后续事件
          actionFn();
        }
      };
    } else {
      // 谷歌火狐
      script.onload = function () {
        // 执行后续操作。
        actionFn();
      };
      script.onerror = function(val, err) {}
    }
  }
}



createTag({ elementTag: 'script', src: 'version.js?t=' + +new Date(), type: "text/javascript" }, getScript)
function getScript() {
  var version = globalObj.version
  createTag({ elementTag: 'link', href: `assets/js/Error404.${version}.js`, rel: "prefetch" })
  createTag({ elementTag: 'link', href: `assets/js/LogIn.${version}.js`, rel: "prefetch" })
  createTag({ elementTag: 'link', href: `assets/js/data-management.${version}.js`, rel: "prefetch" })
  createTag({ elementTag: 'link', href: `assets/js/home.${version}.js`, rel: "prefetch" })
  createTag({ elementTag: 'link', href: `assets/js/subsidy.${version}.js`, rel: "prefetch" })
  createTag({ elementTag: 'link', href: `assets/js/app.${version}.js`, rel: "preload", as: "script" })
  createTag({ elementTag: 'link', href: `assets/js/chunk-vendors.${version}.js`, rel: "preload", as: "script" })


  createTag({ elementTag: 'script', src: `assets/js/chunk-vendors.${version}.js`, type: "text/javascript" })
  createTag({ elementTag: 'script', src: `assets/js/app.${version}.js`, type: "text/javascript" })

}

另外再在App.vue中写一个计时器, 每隔半小时去拿一下配置文件

/**
 * 获取版本
 * @param name 描述信息
 * @return {*}
 */
getVersion() {
  this.axios.get("./version.js?t" + +new Date()).then((res) => {
    let version = res.data.match(/version:(.+),/)[1] || "";
    version = version.trim();
    version = version.replaceAll('"', "");
    version = version.replaceAll("'", "");
    if (version !== window.extra?.version) {
      alert("有最新版本, 即将进行刷新");
      window.location.reload();
    }
  });
},

最后: 代码仅供参考, 具体还是看思路, 主要思路就是搞一个version.js, 一上来请求它(请求时携带时间?t=XXXXX用于防止缓存), 拿到版本后, 再去加载对应的js, 每次更新后的版本号会改变, 通过它的变化来加载不同的js, 就可以避免缓存. 另外可以额外搞个定时器, 每小时去请求, 如果发现版本号变了自动刷新获取最新文件.

vue项目 解决缓存问题 ie缓存

思路

vue项目解决缓存问题 ie缓存