問題描述

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

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

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

需求澄清

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

• 每次程序升級后，用戶不會因?yàn)榫彺鎲栴}而訪問到舊版本的程序。
• 如果程序沒有升級，用戶可以利用靜態(tài)資源的緩存，減少對服務(wù)器的請求。

解決原理

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

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

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

Nginx服務(wù)器配置

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

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í)，你也可以通過修改webpack的配置文件來實(shí)現(xiàn)對靜態(tài)資源文件名的哈希處理，以確保靜態(tài)資源能夠被有效緩存：

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

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

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