vue-cli3项目打包部署到七牛云详细教程

vue-cli3项目打包部署到七牛云

近期公司带宽频繁报警，经过商议，决定将vue打包项目到七牛CDN上，看不不少文档，遇到了很多坑，所以将过程记录下来，如果有什么问题，可以留言喔

上传脚本

先创建一个qiniu.js（上传脚本文件）和一个qiniu-upload-prefix.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;
  console.log(Bucket)
  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);

  let str =  localFile.replace("./dist\\","");
  key = prefix+str;
  key = key.replace("\\","/");
  formUploader.putFile(uploadToken, key, localFile, null, function (respErr,
                                                                        respBody, respInfo) {
    if (respErr) {
        console.log(localFile+"----------------------");
        console.log(respInfo.statusCode);
        console.log(respBody);
      throw respErr;
    }
    if (respInfo.statusCode == 200) {
      console.log(respBody);
    } else {
      console.log(respInfo.statusCode);
      console.log(respBody);
      if (respBody.error) {
        console.log(respBody.error)
      }
    }
  });
}


function sleep(numberMillis) {
  var now = new Date();
  var exitTime = now.getTime() + numberMillis;
  while (true) {
      now = new Date();
      if (now.getTime() > exitTime)
          return;
  }
}


// putExtra.mimeType = null;
//遍历文件夹
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 {
      //file/这里是空间里的文件前缀
      var key ='file';
      var localFile = './' + param;
      sleep(20);
      upload(key,localFile);
    }
  })
}`

这里有两个坑：
1.七牛服务器不允许频繁调用上传接口，状态码返回-1，所以必须加一个睡眠的功能，隔20毫秒在执行下一个循环

2.这里第四个参数尽量设置为空，如果设置了，可能会造成你上传的所有文件都变成一个类型 formUploader.putFile(uploadToken, key, localFile, null, function
(respErr,
respBody, respInfo) {

qiniu-upload-prefix.js文件内容

七牛相同的文件只允许上传一次，上传之后你在上传会提示你文件已存在，所以打包之前修改这个文件（建议使用日期加次数来生成前缀），通过这个配置来保证每次上传路径都不同

vue.config.js配置

验证打包是否成功
1.先修改七牛文件上传前缀
2.编译打包
3.执行编译结果上传
4.访问本地dist文件夹下的index.html,就可以看到所有js,图片、css等文件，都变成上传的文件了