vue前端更新后需要清空缓存代码示例

某一首歌

场景：

前端vue3网站项目使用wepack打包后进行部署，但是用户浏览器访问网站时加载了缓存，导致没有及时更新。
现在需要一个解决方案保证每次重新打包部署后，用户浏览器访问网站重新加载js和css，但是未更新还是继续使用缓存加快加载速度。

1、配置nginx不缓存index.html

index.html文件很小，不缓存的话也不会造成很大影响

1. server {
   
2.     listen 80;
   
3.     server_name yourdomain.com;
   
4.     location / {
   
5.         try_files $uri $uri/ /index.html;
   
6.         root /yourdir/;
   
7.         index index.html index.htm;
   
8. 
   
9.         //对html htm文件设置永远不缓存
   
10.         if ($request_filename ~* .*\.(?:htm|html)$) {
    
11.             add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-    revalidate";
    
12.         }     
    
13.       }
    
14. }

复制代码

2、配置vue.config.js项目webpack为js和css文件增加引用版本号

打包后index.html中引用js和css文件都会带上 ?v=时间戳
这样js和css更新后因为时间戳不一样，会重新加载文件

1. const timestamp = new Date().getTime()
   
2. 
   
3. module.exports = defineConfig({
   
4.     css: {
   
5.         extract: {
   
6.             // 修改输出css目录名及文件名
   
7.             filename: `css/[name].css?v=${timestamp}`,
   
8.             chunkFilename: `css/[name].css?v=${timestamp}`,
   
9.         }
   
10.     },
    
11.     configureWebpack: {
    
12.         output: {
    
13.             // 修改输出js目录名及文件名
    
14.             filename: `js/[name].js?v=${timestamp}`,
    
15.             chunkFilename: `js/[name].js?v=${timestamp}`,
    
16.         },
    
17.     },
    
18. })

复制代码

3、如果是vite.config.js

那么需要在defineConfig下加上配置

1. build: {
   
2.         // outDir: "admin", //想要把dist修改成什么名字在这边改
   
3.         // 自定义底层的 Rollup 打包配置（Rollup文档地址：https://cn.rollupjs.org/configuration-options/）
   
4.         rollupOptions: {
   
5.             // 输出配置
   
6.             output: {
   
7.                 // 输出的文件自定义命名
   
8.                 chunkFileNames: `js/[name]-[hash].${timestamp}.js`,
   
9.                 entryFileNames: `js/[name]-[hash].${timestamp}.js`,
   
10.                 assetFileNamesL: `[ext]/[name]-[hash].${timestamp}.[text]`,
    
11.             }
    
12.         },
    
13.     },

复制代码

总结

到此这篇关于vue前端更新后需要清空缓存的文章就介绍到这了,更多相关vue前端更新清空缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/328984jc1.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！