vite打包解决前端发版后浏览器缓存问题

如何避免浏览器缓存问题，保证每次发布新版本时浏览器都能加载最新的代码

Vite 构建工具的配置文件

vite.config.js

：

import{ defineConfig }from'vite';import vue from'@vitejs/plugin-vue';import{ resolve }from'path';import pkg from'./package.json'assert{type:'json'};// 时间戳const timestamp =newDate().getTime();exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{'@':resolve(__dirname,'src')// 将@配置为src目录的绝对路径}},server:{host:'0.0.0.0',},build:{rollupOptions:{output:{manualChunks:{vendor: Object.keys(pkg.dependencies),},chunkFileNames:({ name })=>{if(name ==='vendor'){return`assets/js/[name]-[hash].js`;// 第三方库不添加时间戳}else{return`assets/js/[name]-[hash]-${timestamp}.js`;// 自定义文件名，使用时间戳保证唯一性}},entryFileNames:({ name })=>{if(name ==='vendor'){return`assets/js/[name]-[hash].js`;// 第三方库不添加时间戳}else{return`assets/js/[name]-[hash]-${timestamp}.js`;// 自定义文件名，使用时间戳保证唯一性}},assetFileNames:`assets/[ext]/[name]-[hash].[ext]`// 资源文件添加时间戳},}}});

通过设置

chunkFileNames

和

entryFileNames

函数，根据文件名是否为第三方库来动态设置输出文件的文件名。对于第三方库，不添加时间戳，确保其文件名稳定；而对于自定义文件，则使用时间戳保证每次构建生成的文件名都具有唯一性。这样的配置能够有效避免浏览器缓存问题，确保浏览器每次都能加载最新的代码，同时又不影响第三方库的缓存效果。