vue项目给static下的静态资源添加版本号

1、在vue项目的根目录新建一个staticversion.js，js文件内容如下代码：

2、在需要给静态文件添加版本号时在根目录运行node staticversion

注：我的项目static文件夹下放了一个H5项目，每次改动H5项目后需要运行node staticversion来给引用的图片或者html中引用的css、js文件等添加版本号以达到清除缓存的目的

 

let fs = require('fs')
let path=require('path');


let timestamp = Date.parse(new Date())/1000 // 得到时间戳
let H5Folder = ['./static']  // 需要添加版本号的文件所在的文件夹

H5Folder.forEach(item=>{
    fileDisplay(item)
})
//文件遍历方法
function fileDisplay(filePath){
    //根据文件路径读取文件，返回文件列表
    fs.readdir(filePath,function(err,files){
        if(err){
            console.log(err)
        }else{
            //遍历读取到的文件列表
            files.forEach(function(filename){
                //获取当前文件的绝对路径
                var filedir = path.join(filePath, filename);
                //根据文件路径获取文件信息，返回一个fs.Stats对象
                fs.stat(filedir,function(eror, stats){
                    if(eror){
                        console.log('获取文件stats失败');
                    }else{

                        var isFile = stats.isFile();//是文件
                        var isDir = stats.isDirectory();//是文件夹
                        if(isFile && (path.extname(filename)=='.html'||path.extname(filename)=='.css')){
                            fs.readFile(filedir,'utf8',function(err,files){
                                let cssReg = /(?:background|background-image)\s*?:\s*?url\(\s*?['"]([^'"]+?)['"][^)]*?\)/gi;
                                let htmlReg = /<(?:link|script|img)[^>:]*?(?!:)(?:href|src)\s*=\s*['"]([^'"]+?)['"][^>]*?>/gi;
                                let imgFunReg = /<img[^>]*?:src='([^']+?)'[^>]*?>/gi;
                                let imgFunRegDouble = /<img[^>]*?:src="([^"]+?)"[^>]*?>/gi;
                                if(files.match(cssReg) && files.match(cssReg).length>0){
                                    // 匹配css里的图片地址
                                    files = filesReplace(cssReg,files,1)
                                }
                                if(files.match(htmlReg) && files.match(htmlReg).length>0){
                                    // 匹配html文件中link、script、img引用
                                    files = filesReplace(htmlReg,files,1)
                                }
                                if(files.match(imgFunReg) && files.match(imgFunReg).length>0){
                                    // 匹配img的src为变量的情况
                                    // 单引号
                                    files = filesReplace(imgFunReg,files,2)
                                }
                                if(files.match(imgFunRegDouble) && files.match(imgFunRegDouble).length>0){
                                    // 匹配img的src为变量的情况
                                    // 双引号
                                    files = filesReplace(imgFunRegDouble,files,3)
                                }
                                fs.writeFile(filedir, files, 'utf8', function (err) {
                                    if (err) return console.log(err);
                                });
                            });
                        }
                        if(isDir){
                            fileDisplay(filedir);//递归，如果是文件夹，就继续遍历该文件夹下面的文件
                        }
                    }
                })
            });
        }
    });
}

// 引用路径替换
function filesReplace(reg,files,type) {
    files = files.replace(reg, function (match, capture) {
        let versionUrl = '';
        let originUrl = '';
        if(capture.indexOf('?v=')!=-1){
            // 替换版本号
            if (type == 2) {
                // <img :src=''>  单引号
                originUrl = capture.split('?v=')[0]+String(capture.split('?v=')[1]).slice(11,String(capture.split('?v=')[1]).length);
                versionUrl = originUrl+'?v='+timestamp+'"';
            }
            if (type == 3) {
                // <img :src="">  双引号
                originUrl = capture.split('?v=')[0]+String(capture.split('?v=')[1]).slice(11,String(capture.split('?v=')[1]).length);
                versionUrl = originUrl+"?v="+timestamp+"'";
            }
            if (type != 2 && type != 3) {
                originUrl = capture.split('?v=')[0]+String(capture.split('?v=')[1]).slice(11,String(capture.split('?v=')[1]).length);
                versionUrl = originUrl+'?v='+timestamp;
            }

        } else {
            // 新增版本号
            originUrl = capture;
            if (type == 2) {
                // <img :src=''>  单引号
                versionUrl = originUrl+'+"?v='+timestamp+'"';
            }
            if (type == 3) {
                // <img :src="">  双引号
                versionUrl = originUrl+"+'?v="+timestamp+"'";
            }
            if (type != 2 && type != 3){
                versionUrl = originUrl+'?v='+timestamp;
            }
        }
        return match.replace(capture, versionUrl);  // 在对应的文件名后添加时间戳
    });
    return files;
}
//readdir方法读取文件名
//readFile方法读取文件内容
//writeFile改写文件内容
//fs.rename改写文件名