快捷導(dǎo)航

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

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

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

1. 現(xiàn)象描述

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

2. 解決方案

2.1 配置public/index.html

配置index.html, 在首頁啟動(dòng)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按時(shí)間戳打包

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

const version = new Date().getTime();
module.exports = {
	css: {
        // 是否使用css分離插件 ExtractTextPlugin
        extract: {
            // 修改打包后css文件名   // css打包文件，添加時(shí)間戳
            filename: `assert/css/[name].${version}.css`,
            chunkFilename: `assert/css/[name].${version}.css`,
        }
    },
    configureWebpack: {
        output: isProduction ?  { // 輸出 添加時(shí)間戳到打包編譯后的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自動(dòng)化發(fā)布Vue項(xiàng)目，我們同樣在default.conf中配置。我們禁止對(duì)html頁面緩存，對(duì)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ā)布的，可能存在多個(gè)Nginx，只需配置項(xiàng)目代碼中使用的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，解決