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

  

Nuxt 自动化部署及打包后文件自动上传七牛云的更多相关文章

  1. RN 上传文件到以及上传文件到七牛云(初步)

    本文将介绍: 如何使用原生 Javascript 上传文件 如何使用七牛云 SDK 上传文件到七牛云 在 App 中文件上传是一个非常重要的需求,但是翻遍 React Naitve 的官方文档没有发现 ...

  2. SpringSpringBoot上传文件到七牛云

    准备工作 maven pom.xml添加七牛云的sdk依赖 <dependency> <groupId>com.qiniu</groupId> <artifa ...

  3. 使用Qiniu-JavaScript-SDK上传文件至七牛云存储

    一.Qiniu-JavaScript-SDK介绍 基于 JS-SDK 可以方便的从浏览器端上传文件至七牛云存储,并对上传成功后的图片进行丰富的数据处理操作. JS-SDK 兼容支持 H5 File A ...

  4. Linux系统定时备份网站文件到七牛云存储脚本

    1.七牛云账号注册. 有些朋友可能会问为什么要备份到七牛云?很简单,七牛云免费注册就能获取1G的存储空间,只要简单几步操作完成实名认证即可获取10G的存储空间,对于一般个人站点来说已经足够备份使用了. ...

  5. 利用ThinkPHP自带的七牛云驱动上传文件到七牛云以及删除七牛云文件方法

    一.准备工作 1.注册七牛云账号 2.选择对象储存->创建空间->设置为公开 3.在config配置文件中添加以下代码 'UPLOAD_FILE_QINIU' => array ( ...

  6. webpack减少打包后文件体积的几种方法

    webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...

  7. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  8. .2-浅析webpack源码之打包后文件

    先不进源码,分析一下打包后的文件,来一张图: 首先创建两个JS文件,内容如下: // config.js module.exports = { entry: './input.js', output: ...

  9. 用ueditor上传图片、文件等到七牛云存储

    ueditor上传文件,是用数据流的形式上传的. 而七牛云存储官方文档中,只提供了文件路径上传的方式. 但是,仅仅是在官方文档中写了这一种方式. 事实上,利用VS的对象管理器,打开Qiniu的dll, ...

随机推荐

  1. .NET string字符串的截取、移除、替换、插入

    在实际开发中经常要用到string的各种截取等操作,在这里总结自己认为经常出现的.NET 字符串的截取.移除.替换.插入操作,方面以后查阅. 前台代码: <%@ Page Language=&q ...

  2. Modern OpenGL用Shader拾取VBO内单一图元的思路和实现(3)

    Modern OpenGL用Shader拾取VBO内单一图元的思路和实现(3) 到上一篇为止,拾取一个VBO里的单个图元的问题已经彻底解决了.那么来看下一个问题:一个场景里可能会有多个VBO,此时每个 ...

  3. yii中使用active record进行关联显示

    model中: view中:

  4. ios 清除列表选中状态

    [tableView deselectRowAtIndexPath:indexPath animated:YES];

  5. C# 数组比较--取得两个集合的交集,差集,并集的方法

    方法关键字: 交集:Intersect 差集:Except 并集:Union 使用代码: , , , , }; , , , , }; var 交集 = arr1.Intersect(arr2).ToL ...

  6. ubuntu 开机自动挂载nfs服务器上的home分区

    通过‘fstab’也可以配置 NFS 和 SMB 的共享目录.由于涉及到的可选项很重要,并且需要了解一些协议的工作情况,您得先阅读 Samba 和 NFS . 基本语法和本地介质相差不是很多.条目中的 ...

  7. HTML+CSS基础小笔记再整理

    1. font的两个必须要写的:font-size 和 font-family text-indent 首行缩进(em)1em=一个文字大小 text-algin 对齐方式:left.center.r ...

  8. Python练习——循环2

    1.求1~100之间能被7整除,但不能同时被5整除的所有整数 . for i in range(1,101): if i%7 == 0 and i%5 !=0: print(i) 2.输出“水仙花数” ...

  9. 斐讯 N1 刷 Armbian 5.64

    前言 N1 天天链是斐讯出的一款挖矿产品,虽然已经翻车,但是本身硬件配置还是很不错的,晶晨 S905D 主控,蓝牙 4.1,双频 WiFi,2G + 8G,USB2.0,HDMI.而一个只要不到 80 ...

  10. bzoj 1861 splay

    就是裸地splay,然后自己写的不是特别好,tle了,最近时间比较紧迫,有时间了改下,在此记录 另附转载pascal AC代码最下面 /******************************** ...