Vue项目打包部署到七牛CDN
如果不清楚可以私信我或者可以查看七牛官方文档node js SDK表单方式上传，七牛官网文档地址： https://developer.qiniu.com/kodo/sdk/1289/nodejs#form-upload-file
目的
1.解决带宽报警（服务器带宽小，如何保证网站稳定）
2.解决项目上线问题（项目出现Bug，必须当时上线，上线成功之后，一下会有大量请求进来，如何保证网站正常运行）
3.访问速度（js、css、图片比较大，加载速度慢）
问题
如何解决CDN缓存问题？
如何保证文件全部上传成功？
如何替换vue项目中的静态资源访问路径？
文件上传之后所有文件类型都变成了一样的问题？
上传成功之后，如何测试？
项目环境
vue-cli3
node js
项目结构
qiniu.js 上传vue文件脚本，编译之后可以直接运行qiniu.js即可上传
qiniu-upload-prefiex.js 上传文件的前缀配置
上线脚本qiniu.js
var fs = require('fs');
var path = require('path');
var qiniu = require("qiniu");
var qiniuPrefix = require("./qiniu-upload-prefix");
//自己七牛云的秘钥
var accessKey = '***************************************'
var secretKey = '***************************************';
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var config = new qiniu.conf.Config();
// 空间对应的机房，zone_z1代表华北，其他配置参见七牛云文档
config.zone = qiniu.zone.Zone_z1;
// 是否使用https域名
config.useHttpsDomain = true;
// 上传是否使用cdn加速
config.useCdnDomain = true;
var formUploader = new qiniu.form_up.FormUploader(config);
var putExtra = new qiniu.form_up.PutExtra();
//文件前缀
const prefix = qiniuPrefix.prefix;
main()
function main(){
displayFile('./dist');
}
//upload('static/css/app.qwer.css',"./dist/static/css/app.qwer.css")
function upload(key,localFile) {
//这里base-html是存储空间名
// var Bucket = `cfun:${key}`;
var Bucket = key;
var options = {
scope: Bucket,
// detectMime:0
// MimeType: 'text/html;text/css;text/javascript;application/x-gzip',
};
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken = putPolicy.uploadToken(mac);
//windows
let str = null;
if(localFile.indexOf("./dist\\") >=0){
str = localFile.replace("./dist\\","");
}else if(localFile.indexOf("./dist/") >= 0){
//苹果
str = localFile.replace("./dist/","");
}else{
str = localFile;
}
key = prefix+str;
//上传之后的文件名
key = key.replace("\\","/");
formUploader.putFile(uploadToken, key, localFile, null, function (respErr,
respBody, respInfo) {
if (respErr) {
// console.log(uploadToken);
console.log(localFile+"文件上传失败,正在重新上传-----------");
// console.log(respInfo.statusCode);
// console.log(respBody);
upload('file2',localFile);
// throw respErr;
}else{
if (respInfo.statusCode == 200) {
console.log(respBody);
} else {
console.log(respInfo.statusCode);
console.log(respBody);
if (respBody.error) {
console.log(respBody.error)
}
}
}
});
}
//遍历文件夹
function displayFile(param) {
//转换为绝对路径
//var param = path.resolve(param);
fs.stat(param, function (err, stats) {
//如果是目录的话，遍历目录下的文件信息
if (stats.isDirectory()) {
fs.readdir(param, function (err, file) {
file.forEach((e) => {
//遍历之后递归调用查看文件函数
//遍历目录得到的文件名称是不含路径的，需要将前面的绝对路径拼接
var absolutePath = path.join(param, e);
//var absolutePath = path.resolve(path.join(param, e));
displayFile(absolutePath)
})
})
} else {
//file2/这里是空间里的文件前缀
var key ='file2';
var localFile = './' + param;
if(!localFile.endsWith(".gz")){
upload(key,localFile);
}
}
})
}
qiniu-upload-prefiex.js脚本
因为七牛上传文件不可以重复，重复将导致文件上传失败，经过再三商议，最终以每天开始时间作为一个时间串
//七牛文件上传前缀，使用时间戳作为文件上传前缀
let date = new Date();
date.setSeconds(0);
date.setMinutes(0);
date.setMilliseconds(0);
date.setHours(0);
const time = date.getTime();
module.exports = {
prefix: 'cms-easy/'+time+'/'
}编译打包，上传七牛云
在package.json文件夹中配置
"build-qiniu": "vue-cli-service build && node ./qiniu.js"
然后在控制台中执行： npm run build-qiniu，最后坐等成功就行了
解决问题
如何解决CDN缓存问题？
做这个功能的时候，查看了很多博客，总结以下两种实现解决办法：
1.写一个脚本，循环调用七牛刷新接口，去刷新需要刷新的文件，但是七牛云有次数限制，一天刷新次数是500，而且我用过控制台刷新，刷新很慢
2.相比之下，我觉得使用第二种方式，换路径，保证每次上传路径不一致，就不考虑缓存问题了，就是qiniu-upload-prefiex.js文件，一来解决缓存问题，二是方便统一管理，将项目放在同一文件夹下，三是可以随时回退版本
如何保证文件全部上传成功？
有时候因为文件太大，或者网络不好的原因可能导致上传失败，这个问题折磨了我很久，一直报错，状态码-1，最后的解决办法时，报错之后再重新上传没成功的文件
如何替换vue项目中的静态资源访问路径？
在vue.config.js文件中使用publicPath配置,所有静态资源访问或编译时都会加上这里配置的前缀（配置规则：资源访问域名+qiniu-upload-prefiex.js配置的前缀 eg:https://easks.file.com/20201126/）
文件上传之后所有文件类型都变成了一样的问题？
文件上传之后，发现所有的文件类型都变成了一样的，后来是通过提交七牛工单解决的，可以将第四个参数设置为空，然后在传，就会发现所有上传了的文件类型都对了
上传成功之后，如何测试？
编译成功之后可以到dist文件夹下，用浏览器打开index.html,可以正常打开，并且所有资源都加载成功，页面可以正常访问，则部署成功，否则没成功