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

一、vue2

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 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
}

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

import versionTood from '@/libs/versionUpdate'

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

　　

 

二、vue3

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每次發版更改里面的版本號

{
    "version": "0.0.1"
}

3.在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
}

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

import versionTood from '@/libs/versionUpdate'

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