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/’