Nuxt 自动化部署及打包后文件自动上传七牛云

1.安装七牛云

2.在项目根目录新建 upload.js

3.上传凭证

 

4.上传配置，详情参考七牛云文档

5.在 package.js中修改项目build完成执行upload文件命令

7. nuxt.config.js设置CDN路径，详情参考 Nuxt文档

 

 

8. upload.js 完整代码

const qiniu = require("qiniu");
const fs = require("fs");
const path = require("path");
const PUBLIC_PATH = path.join(__dirname, "/");

// 上传凭证
var accessKey = '你的 ak密钥';
var secretKey = '你的 sk密钥';
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);

var options = {
    scope: '你的存储空间名',
  };
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken=putPolicy.uploadToken(mac);

var config = new qiniu.conf.Config();
// 空间对应的机房
config.zone = qiniu.zone.Zone_z0;
// 是否使用https域名
config.useHttpsDomain = true;
// 上传是否使用cdn加速
config.useCdnDomain = true;

/**
 * 遍历文件夹递归上传
 * @param {path} src 本地路径
 * @param {string} dist oos文件夹名
 * @param {boolean} isDir 是否为文件夹下文件
 */
async function addFileToOSSSync(src, dist,isDir) {
    let docs = fs.readdirSync(src);
    docs.forEach(function(doc) {
        let _src = src +'/'+ doc,
        _dist = dist +'/'+ doc;
        let st = fs.statSync(_src);
        // 判断是否为文件
        if (st.isFile() && dist !== "LICENSES`") {
            putOSS(_src, !isDir?doc:`fonts/${doc}`);//如果是文件夹下文件，文件名为 fonts/文件名
        }
        // 如果是目录则递归调用自身
        else if (st.isDirectory()) {
            addFileToOSSSync(_src, _dist,true);
        }
    });
}
/**
 *单个文件上传至oss
 */
async function putOSS(src, dist) {
    try {
        var localFile = src;
        var formUploader = new qiniu.form_up.FormUploader(config);
        var putExtra = new qiniu.form_up.PutExtra();
        var key=dist;
        // 文件上传
        await formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr,
            respBody, respInfo) {
            if (respErr) {
                throw respErr;
            }
            if (respInfo.statusCode == 200) {
                console.log(key + "上传oss成功");
            } else {
                console.log(respInfo.statusCode);
                console.log(respBody);
            }
        });
    } catch (e) {
        console.log("上传失败".e);
    }
}
/**
 *上传文件启动
 */
async function upFile() {
    try {
        let src = PUBLIC_PATH+".nuxt/dist/client";
        let docs = fs.readdirSync(src);
        await addFileToOSSSync(src, docs);
    } catch (err) {
        console.log("上传oss失败", err);
    }
}
upFile();

9.运行 npm run build 以及 npm run start，项目静态文件顺利上传至CDN并引用

10.注意事项

　　1.上传的文件日后还需要下次上传前删除，这部分我会在下篇文章进行说明

　　2.由于七牛云不支持文件夹格式路径，所以上传文件夹时，需要递归进入文件夹内上传每个文件

　　

　　但是字体文件，引入路径为/fonts

　　

　　临时想了个办法，探测为文件夹内的文件，便将文件名加入‘fonts/’