前端頁面部署之后更新緩存

前端頁面部署更新之后，因為緩存問題，用戶正在瀏覽的頁面或者收藏夾中直接訪問，頁面在不刷新更新緩存的情況下，用戶不知道頁面是否有更新

解決方案：

服務端支持：
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);
}