vue項(xiàng)目打包后瀏覽器緩存問題如何解決

本篇內(nèi)容主要講解“vue項(xiàng)目打包后瀏覽器緩存問題如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue項(xiàng)目打包后瀏覽器緩存問題如何解決”吧!

vue項(xiàng)目打包后瀏覽器緩存

1、第一步需要在index.html中添加如下代碼：

 <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、第二步需要在vue.config.js中添加如下代碼：

const path = require("path"); // 獲取當(dāng)前的時(shí)間戳
let timeStamp = new Date().getTime();
module.exports = {
    filenameHashing: false, // 打包的時(shí)候不使用hash值.因?yàn)槲覀冇袝r(shí)間戳來確定項(xiàng)目的唯一性了.
    configureWebpack: {    //重點(diǎn)
        output: { // 輸出重構(gòu) 打包編譯后的js文件名稱,添加時(shí)間戳.
            filename: `js/js[name].${timeStamp}.js`,
            chunkFilename: `js/chunk.[id].${timeStamp}.js`,
        }
    },
    css: { //重點(diǎn).
        extract: { // 打包后css文件名稱添加時(shí)間戳
            filename: `css/[name].${timeStamp}.css`,
            chunkFilename: `css/chunk.[id].${timeStamp}.css`,
        }
    }
};

可在自己的配置文件中相對(duì)的寫入以上代碼

3、需要在nginx中配置不去緩存index.html文件內(nèi)容（nginx.conf中配置）

if ($request_filename ~* ^.*?.(html|htm)$) {
     add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
 }

vue打包更新后緩存

需要服務(wù)器配置

nginx： 里面cache-control：no-cache，no-store

到此，相信大家對(duì)“vue項(xiàng)目打包后瀏覽器緩存問題如何解決”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！