快捷導(dǎo)航

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

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

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

場(chǎng)景：

前端vue3網(wǎng)站項(xiàng)目使用wepack打包后進(jìn)行部署，但是用戶(hù)瀏覽器訪問(wèn)網(wǎng)站時(shí)加載了緩存，導(dǎo)致沒(méi)有及時(shí)更新。

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

1、配置nginx不緩存index.html

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

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

2、配置vue.config.js項(xiàng)目webpack為js和css文件增加引用版本號(hào)

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

這樣js和css更新后因?yàn)闀r(shí)間戳不一樣，會(huì)重新加載文件

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]`,
            }
        },
    },

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Vuejs第十篇之vuejs父子組件通信
這篇文章主要介紹了Vuejs第十篇之vuejs父子組件通信的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
如何利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫(huà)
過(guò)渡Vue在插入、更新或者移除 DOM 時(shí),提供多種不同方式的應(yīng)用過(guò)渡效果這篇文章主要給大家介紹了關(guān)于如何利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫(huà)的相關(guān)資料,需要的朋友可以參考下
2021-11-11
Vue項(xiàng)目分包打包配置(包含dev)完整過(guò)程
最近接到一個(gè)需求,公司需要對(duì)vue項(xiàng)目實(shí)現(xiàn)線上打包,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目分包打包配置(包含dev)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
解決vue請(qǐng)求接口第一次成功,第二次失敗問(wèn)題
這篇文章主要介紹了解決vue請(qǐng)求接口第一次成功,第二次失敗問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
Vue的雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue的雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
Vue項(xiàng)目前后端聯(lián)調(diào)(使用proxyTable實(shí)現(xiàn)跨域方式)
這篇文章主要介紹了Vue項(xiàng)目前后端聯(lián)調(diào)(使用proxyTable實(shí)現(xiàn)跨域方式)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
mpvue構(gòu)建小程序的方法(步驟+地址)
mpvue是一個(gè)使用Vue.js開(kāi)發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，這篇文章主要介紹了mpvue構(gòu)建小程序的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
Vue?3?中使用?vue-router?進(jìn)行導(dǎo)航與監(jiān)聽(tīng)路由變化的操作
在Vue3中,通過(guò)useRouter和useRoute可以方便地實(shí)現(xiàn)頁(yè)面導(dǎo)航和路由變化監(jiān)聽(tīng),useRouter允許進(jìn)行頁(yè)面跳轉(zhuǎn),而useRoute結(jié)合watch可以根據(jù)路由變化更新組件狀態(tài),這些功能為Vue3應(yīng)用增加了靈活性和響應(yīng)性,使得路由管理更加高效
2024-09-09
詳解用vue-cli來(lái)搭建vue項(xiàng)目和webpack
本篇文章主要介紹了詳解用vue-cli來(lái)搭建vue項(xiàng)目和webpack，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
vue使用節(jié)流函數(shù)的踩坑實(shí)例指南
防抖和節(jié)流的目的都是為了減少不必要的計(jì)算，下面這篇文章主要給大家介紹了關(guān)于vue使用節(jié)流函數(shù)踩坑的相關(guān)資料,需要的朋友可以參考下
2021-05-05