vue项目打包自动更新版本号且自动刷新缓存的方法示例

哑哑

在项目根目录创建一个 version.js 文件!

1. const fs = require('fs');
   
2. const path = './package.json';
   
3. 
   
4. function getPackageJson() {
   
5.     return JSON.parse(fs.readFileSync(path));
   
6. }
   
7. 
   
8. try {
   
9.     let packageJson = getPackageJson();
   
10.     let version = packageJson.version;
    
11.     // 去除前缀 v
    
12.     if (version.startsWith('v')) {
    
13.         version = version.slice(1);
    
14.     }
    
15.     let arr = version.split('.').map(item => {
    
16.         let num = Number(item);
    
17.         if (isNaN(num)) {
    
18.             throw new Error(`Invalid version number part: ${item}`);
    
19.         }
    
20.         return num;
    
21.     });
    
22. 
    
23.     if (arr[2] < 9) {
    
24.         arr[2] += 1;
    
25.     } else if (arr[1] < 9) {
    
26.         arr[1] += 1;
    
27.         arr[2] = 0;
    
28.     } else {
    
29.         arr[0] += 1;
    
30.         arr[1] = 0;
    
31.         arr[2] = 0;
    
32.     }
    
33. 
    
34.     const newVersion = 'v' + arr.join('.');
    
35.     packageJson.version = newVersion;
    
36. 
    
37.     fs.writeFileSync(path, JSON.stringify(packageJson, null, 2));
    
38.     console.log(`Version updated to ${newVersion}`);
    
39.         } catch (error) {
    
40.             console.error('Failed to update package.json:', error);
    
41.             process.exit(1);
    
42.         }

复制代码

在项目package.json配置基础版本号

继续在package.json文件的打包命令里添加执行version代码

可以先到运行serve里面添加执行version代码查看package.json里的版本号是否生效

main.js里面添加清除缓存，刷新代码；简单粗暴

1. const version = require('../package.json').version
   
2. const versionStorage = localStorage.getItem('version')
   
3. if (version != versionStorage) {
   
4.   localStorage.clear()
   
5.   localStorage.setItem('version', version)
   
6.   setTimeout(() => {
   
7.     window.location.reload(true)
   
8.   }, 500)
   
9. }

复制代码

总结

到此这篇关于vue项目打包自动更新版本号且自动刷新缓存的文章就介绍到这了,更多相关vue项目打包自动更新版本号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

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