vue項目版本更新後文件存在緩存問題解決方案(vue-cli2.0/vue-cli3.0)

vue-cli2.0

1.配置webpack.prod.conf.js 

 配置output加t=[chunkhash:8]相當於加時間戳，用於清緩存

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js?t=[chunkhash:8]'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js?t=[chunkhash:8]')
  },

2.在static靜態目錄下新建version.json每次發版更改裏面的版本號 

{
    "version": "0.0.1"
}

3.在src中新建 libs/versionUpdate.js文件

import Vue from 'vue';

const vm = new Vue();
const isNewVersion = () => {
  let url = `//${ window.location.host }/static/version.json`;
  vm.$get(url).then(res => {
    let version = res.data.version;
    let localVersion = localStorage.getItem('version');
    if (localVersion && localVersion != version) {
      if (confirm("系統檢測到有新版本，是否更新？")) {
        localStorage.setItem('version', res.data.version);
        window.location.reload();
        return;
      }
    }else {
      localStorage.setItem('version', res.data.version);
    }
  });
};
export default {
  isNewVersion
}

4.在全局路由攔截中寫，只要每次版本號不同就重新加載頁面配合第一步就可以清楚瀏覽器緩存

import versionTood from '@/libs/versionUpdate'

router.beforeEach(( to, from, next ) => {
  //判斷當前代碼版本是否與服務器中代碼版本一致，如不一致則刷新頁面獲取最新
  versionTood.isNewVersion();
}

 

vue-cli3.0

1.在vue.config.js中配置output

const Timestamp = new Date().getTime();

configureWebpack: {
    output: {
      filename: `js/[name].${Timestamp}.js`, // 每次構建打包時給文件名加上時間戳，確保每次版本更新的文件名不一樣
      chunkFilename: `js/[name].${Timestamp}.js`
    }
}

2.在public目錄下新建version.json每次發版更改裏面的版本號 (同vue-cli2.0) 

3.在src中新建 libs/versionUpdate.js文件

import Vue from 'vue';
import { axios } from '@/utils/request'
const vm = new Vue();
const isNewVersion = () => {
  let url = `//${ window.location.host }/version.json`;
  axios.get(url).then(res => {
    //同vue-cli2.0
     .......
  });
};
export default {
  isNewVersion
}

4.在全局路由攔截中寫，只要每次版本號不同就重新加載頁面配合第一步就可以清楚瀏覽器緩存 (同vue-cli2.0)