vue前端更新后需要清空緩存代碼示例

更新時間：2024年10月18日 09:47:52 作者：woflyoycm

這篇文章主要給大家介紹了關(guān)于vue前端更新后需要清空緩存的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下

場景：

前端vue3網(wǎng)站項目使用wepack打包后進行部署，但是用戶瀏覽器訪問網(wǎng)站時加載了緩存，導(dǎo)致沒有及時更新。

現(xiàn)在需要一個解決方案保證每次重新打包部署后，用戶瀏覽器訪問網(wǎng)站重新加載js和css，但是未更新還是繼續(xù)使用緩存加快加載速度。

1、配置nginx不緩存index.html

index.html文件很小，不緩存的話也不會造成很大影響

server {
    listen 80;
    server_name yourdomain.com;
    location / {
        try_files $uri $uri/ /index.html;
        root /yourdir/;
        index index.html index.htm;
 
        //對html htm文件設(shè)置永遠不緩存
        if ($request_filename ~* .*\.(?:htm|html)$) {
            add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-    revalidate";
        }     
      }
}

2、配置vue.config.js項目webpack為js和css文件增加引用版本號

打包后index.html中引用js和css文件都會帶上 ?v=時間戳

這樣js和css更新后因為時間戳不一樣，會重新加載文件

const timestamp = new Date().getTime()

module.exports = defineConfig({
    css: {
        extract: {
            // 修改輸出css目錄名及文件名
            filename: `css/[name].css?v=${timestamp}`,
            chunkFilename: `css/[name].css?v=${timestamp}`,
        }
    },
    configureWebpack: {
        output: {
            // 修改輸出js目錄名及文件名
            filename: `js/[name].js?v=${timestamp}`,
            chunkFilename: `js/[name].js?v=${timestamp}`,
        },
    },
})

3、如果是vite.config.js

那么需要在defineConfig下加上配置

build: {
        // outDir: "admin", //想要把dist修改成什么名字在這邊改
        // 自定義底層的 Rollup 打包配置（Rollup文檔地址：https://cn.rollupjs.org/configuration-options/）
        rollupOptions: {
            // 輸出配置
            output: {
                // 輸出的文件自定義命名
                chunkFileNames: `js/[name]-[hash].${timestamp}.js`,
                entryFileNames: `js/[name]-[hash].${timestamp}.js`,
                assetFileNamesL: `[ext]/[name]-[hash].${timestamp}.[text]`,
            }
        },
    },