SPA、單頁面應用重新部署后，正在瀏覽的頁面如何更新緩存？

使用axios請求'/index.html'文件 對比css和js文件的hash部分 如果不一致可以reload

時機可以在router的beforeEach或者其它

可以給html的url后邊加上version或者時間戳等參數，如？version='1.1.0',這樣每次發(fā)布后的url都是不同的，瀏覽器就會重新請求頁面了

樓主后來解決問題了嗎？

這個問題我也思考了很久，目前沒有找到比較完美的解決方案。事實上我們要把當前運行的代碼更新到最新的，只能先更新index.html，而更新index.html目前我發(fā)現只能是刷新頁面了。

目前臨時解決方案有兩個：

1. 通過后端接口返回版本號判斷是否有更新，有更新，就把頁面刷新一下。這個事情可以放到切換路由的時候做，比如beforeEach。
2. 在編譯的時候自己生成一個js文件，然后前端用jsonp去請求這個js，判斷是否有更新。有更新，就把頁面刷新一下。這個事情可以放到切換路由的時候做，比如beforeEach。具體步驟如下：

在編譯時候生成一個包含版本信息的version.js文件到dist目錄,比如在webpack.prod.conf.js中：

var version = new Date().getTime()
var content = "getVersion('" + version + "')"

// console.log('開始創(chuàng)建版本文件...')
fs.writeFile(config.build.assetsRoot + "/version.js", content, function(err) {
  if(err) {
      return console.log(err);
  }
  // console.log("The file was saved!");
});

在路由文件中設置回調：

// 獲取版本更新的jsonp回調函數
window.getVersion = version => {
  if((localStorage.frontendVersion && version !== localStorage.frontendVersion) || (window.frontendVersion && version !== window.frontendVersion)) {
    Loading.service(); // 啟動全屏loading
    location.reload(); // 刷新頁面
  }

  localStorage.frontendVersion = version; // 保存 以便下次使用判斷
  window.frontendVersion = version; // 保存 以便下次使用判斷
}

在router.beforeEach或router.afterEach發(fā)起jsonp：

var versionScript = document.createElement("script");
versionScript.src = location.origin + '/version.js?v=' + new Date().getTime();
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(versionScript, s);

這兩個最終效果都是用戶在切換頁面的時候，會發(fā)起一個請求，然后判斷是否有更新，有更新就會刷新。

勉強解決了這個問題，期待有更好的方案。