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.注意事项
由于七牛云不支持文件夹格式路径,所以上传文件夹时,需要递归进入文件夹内上传每个文件
但是字体文件,引入路径为/fonts
临时想了个办法,探测为文件夹内的文件,便将文件名加入‘fonts/’