vue前端更新后需要清空缓存代码示例
作者：woflyoycm
这篇文章主要给大家介绍了关于vue前端更新后需要清空缓存的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用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}`,
},
},
})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]`,
}
},
},总结
到此这篇关于vue前端更新后需要清空缓存的文章就介绍到这了,更多相关vue前端更新清空缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！