Vue項目發(fā)布后瀏覽器緩存問題解決方案

更新時間：2024年09月02日 08:35:51 作者：算法小生?

在vue項目開發(fā)中一直有一個令人都疼的問題,就是緩存問題,這篇文章主要給大家介紹了關(guān)于Vue項目發(fā)布后瀏覽器緩存問題的解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. 現(xiàn)象描述

每次Jenkins自動化發(fā)布Vue項目后，用戶需要手動全部清理歷史緩存數(shù)據(jù)才可以使用系統(tǒng)，用戶體驗非常不好

2. 解決方案

2.1 配置public/index.html

配置index.html, 在首頁啟動no-store禁止緩存

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">

2.2 配置vue.config.js按時間戳打包

vue 默認(rèn)配置，打包后 css 和 js 的名字后面都加了哈希值，不會有緩存問題，當(dāng)然我們也可以自己重新定義根據(jù)時間戳

const version = new Date().getTime();
module.exports = {
	css: {
        // 是否使用css分離插件 ExtractTextPlugin
        extract: {
            // 修改打包后css文件名   // css打包文件，添加時間戳
            filename: `assert/css/[name].${version}.css`,
            chunkFilename: `assert/css/[name].${version}.css`,
        }
    },
    configureWebpack: {
        output: isProduction ?  { // 輸出 添加時間戳到打包編譯后的js文件名稱
            filename: `assert/js/js[name].${version}.js`,
            chunkFilename: `assert/js/js[name].${version}.js`,
        } : {},
   }
}

2.3 配置nginx

但是 index.html 在服務(wù)器端可能是有緩存的，需要在服務(wù)器配置不讓緩存 index.html。之前我們有寫過文章Jenkins自動化發(fā)布Vue項目，我們同樣在default.conf中配置。我們禁止對html頁面緩存，對js等緩存，這樣在首頁始終可以獲取最新的html頁面，進(jìn)入后自然可以使用最新的js打包文件，從而解決緩存問題

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        if ($request_filename ~* .*\.(js|css|woff|png|jpg|jpeg)$)
        {
            expires    100d;
        }
        if ($request_filename ~* .*\.(?:htm|html)$)
        {
            add_header Cache-Control "no-store";
        }
    }

如果是通過K8S發(fā)布的，可能存在多個Nginx，只需配置項目代碼中使用的nginx即可

附：清除瀏覽器 localStorage 緩存

1、更新package.json中的 version 值，每次打包往上遞增

2、main.js中，根據(jù) version 判斷是否進(jìn)行緩存清理

const VUE_APP_VERSION = require('../package.json').version
const vers = window.localStorage.getItem('appVersion')
if(VUE_APP_VERSION != vers){
  localStorage.clear()
  window.localStorage.setItem('appVersion', VUE_APP_VERSION)
  location.reload()
}

OK，解決