vue プロジェクトが更新された後、ファイルはキャッシュ内に存在するため、更新をレンダリングするにはファイルを更新する必要があります

序文

Vue プロジェクトの新しいバージョンがリリースされるたびに、テスターはバグを確認するためにブラウザ コードを更新するために強制的に更新する必要があります。ユーザーにとって、これはさらに不合理です。したがって、ブラウザがファイルを自動的に更新できるようにする方法を見つけてください。

始める

1. 静的静的ディレクトリに新しい version.json を作成し、リリースごとにバージョン番号を変更します

{
    
    
    "version": "1.0.1"
}

2. src に新しい libs/versionUpdate.js ファイルを作成します

import axios from 'axios'
 
const isNewVersion = () => {
    
    
  let url = `//${
      
      window.location.host}/static/version.json?t=${
      
      new Date().getTime()}`;
  axios.get(url).then(res => {
    
    
    if (res.status === 200) {
    
    
      let vueVersion = res.data.version;
      let localVueVersion = localStorage.getItem('vueVersion');
      if (localVueVersion && localVueVersion != vueVersion) {
    
    
        localStorage.setItem('vueVersion', vueVersion);
        window.location.reload();
        return;
      } else {
    
    
        localStorage.setItem('vueVersion', vueVersion);
      }
    }
  });
}
 
export default {
    
    
  isNewVersion
}

3. バージョン番号が毎回異なる限り、グローバル ルート インターセプトを書き込み、ページをリロードし、ブラウザのキャッシュをクリアするための最初のステップに協力します。

import versionTood from '@/libs/versionUpdate'
 
router.beforeEach(( to, from, next ) => {
    
    
  //判断当前代码版本是否与服务器中代码版本一致，如不一致则刷新页面获取最新
  versionTood.isNewVersion();