快捷導(dǎo)航

Vue 打包上線后的緩存問(wèn)題解決

更新時(shí)間：2023年11月29日 16:53:38 作者：樂(lè)辭

在使用vue腳手架搭建前端工程時(shí),經(jīng)常會(huì)遇到打包上線后的緩存問(wèn)題,許多開發(fā)者會(huì)直接在index.html中加入類似以下代碼來(lái)解決緩存問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧

問(wèn)題描述

在使用vue腳手架搭建前端工程時(shí)，經(jīng)常會(huì)遇到打包上線后的緩存問(wèn)題。具體表現(xiàn)為，當(dāng)程序版本升級(jí)時(shí)，用戶仍然訪問(wèn)到舊版本的頁(yè)面。許多開發(fā)者會(huì)直接在index.html中加入類似以下代碼來(lái)解決緩存問(wèn)題：

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

這種方法雖然解決了緩存問(wèn)題，但卻導(dǎo)致用戶每次訪問(wèn)程序都需要重新請(qǐng)求服務(wù)器，無(wú)法利用靜態(tài)資源的緩存，從而增加了流量消耗和網(wǎng)絡(luò)壓力。

需求澄清

實(shí)際上，我們需要解決的問(wèn)題并不是簡(jiǎn)單地要緩存或不要緩存，而是希望根據(jù)情況靈活控制

每次程序升級(jí)后，用戶不會(huì)因?yàn)榫彺鎲?wèn)題而訪問(wèn)到舊版本的程序。
如果程序沒(méi)有升級(jí)，用戶可以利用靜態(tài)資源的緩存，減少對(duì)服務(wù)器的請(qǐng)求。

解決原理

在vue腳手架的每次打包過(guò)程中，會(huì)給生成的靜態(tài)資源文件名添加哈希后綴，并 index.html中引入帶有相應(yīng)哈希后綴的靜態(tài)資源文件。因此，每個(gè)版本的靜態(tài)資源都是被正確引入的，不會(huì)因升級(jí)而出現(xiàn)緩存問(wèn)題。因此，我們只需讓index.html不被緩存，而讓其他靜態(tài)資源可以被緩存，即可滿足需求。

然而，要實(shí)現(xiàn)讓靜態(tài)資源被緩存，但讓index.html不被緩存，則需要借助服務(wù)器配置，通過(guò)設(shè)置針對(duì)index.html請(qǐng)求的header來(lái)控制緩存。

具體實(shí)現(xiàn)

Nginx服務(wù)器配置

如果你使用Nginx服務(wù)器，你可以簡(jiǎn)單地添加以下配置：

location = /index.html {
 add_header Cache-Control "no-cache, no-store";
}

Apache服務(wù)器配置

如果你使用Apache服務(wù)器，你可以在VirtualHost中增加以下配置：

<Files "index.html">  
    Header set Cache-Control "no-cache, no-store"  
 </Files>

修改webpack的配置文件

同時(shí)，你也可以通過(guò)修改webpack的配置文件來(lái)實(shí)現(xiàn)對(duì)靜態(tài)資源文件名的哈希處理，以確保靜態(tài)資源能夠被有效緩存：

 onst Timestamp = new Date().getTime();
 // Vue.config.js 配置選項(xiàng)
module.exports = {
	configureWebpack: { // webpack 配置
        output: { // 輸出重構(gòu)  打包編譯后的 文件名稱:【模塊名稱.contenthash】使用contenthash保證了文件被修改才會(huì)重新生成新的文件名，讓用戶能有效使用瀏覽器緩存，減輕服務(wù)器壓力
            filename: `static/js/[name].[contenthash:8].js`,
            chunkFilename: `static/js/[name].[contenthash:8].js`
        },
    }
}

通過(guò)以上步驟，你可以靈活地控制緩存，讓用戶在程序升級(jí)后訪問(wèn)到最新版本的頁(yè)面，同時(shí)減少了靜態(tài)資源的重復(fù)請(qǐng)求，優(yōu)化了用戶體驗(yàn)和網(wǎng)絡(luò)流量消耗。

到此這篇關(guān)于Vue 打包上線后的緩存問(wèn)題的文章就介紹到這了,更多相關(guān)vue打包上線緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: