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);//windowslet 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,可以正常打开，并且所有资源都加载成功，页面可以正常访问，则部署成功，否则没成功