vue前端更新后需要清空缓存
场景：前端vue3网站项目使用wepack打包后进行部署，但是用户浏览器访问网站时加载了缓存，导致没有及时更新。
现在需要一个解决方案保证每次重新打包部署后，用户浏览器访问网站重新加载js和css，但是未更新还是继续使用缓存加快加载速度。
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文件设置永远不缓存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}`,},},
})