将 vue 生成的 js 上传到七牛的实例

一般 vue 的项目，大家都是直接把最后生成的 css js 等文件直接上传到服务器，并没有才有 cdn 的业务

这样做一般有2个弊端，

  1. 增加服务器带宽压力，访问量一旦上去，服务器就可能因为带宽压力挂掉
  2. 部分地区访问速度会变慢

不过虽然知道归知道，但是每次都手动把 js css 文件传到七牛上很累的。
尤其是在改动频繁的情况下，上传七牛每次上传七牛 cdn 很浪费时间。

于是就去找七牛的文档，决定用脚本来解决这个问题，我是用的 python sdk 实现得。

python 环境请自行安装

首先下载七牛的包

pip install qiniu

然后安装第三方的依赖包 glob2

pip install glob2

upqiniu.py

# -*- coding: utf-8 -*-
from qiniu import Auth, put_file,
import qiniu.config
import glob2
import os
#需要填写你的 Access Key 和 Secret Key
access_key = '*********************'
secret_key = '**********************'
#构建鉴权对象
q = Auth(access_key, secret_key)
#要上传的空间
bucket_name = '****'

resources = glob2.glob('dist/static/**')
def upload(path):
  file_name = path.replace('dist/', '')
  key = file_name
  token = q.upload_token(bucket_name, key, 3600)
  localfile = './' + path
  put_file(token, key, localfile)

for r in resources:
  if os.path.isfile(r):
   upload(r)

需要将本脚本(upqiniu.py)放到 dist 同级目录下，如下图：


image.png

脚本中的 access_key secret_key 你登录七牛后在个人资料中即可找到：

还需要将 webpack 的 publicPath 改成七牛的地址即改成下面这个

在 vue 的项目中，只需要改动 config 目录下面的 index.js 即可

虽然改动起来有一点小麻烦，但是一劳永逸，

首先 npm run build

然后 python upqiniu.py

最后将你的 index.html 拉到线上服务器就可以了。

ps: 这个脚本会将 dist/static/ 的所有文件上传到七牛，包括 字体文件 ， 图片等。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中七牛插件使用的实例代码

    本文介绍了vue中七牛插件使用,我也正在学习,分享给大家,顺便留个笔记,废话不说了,如下: <template> <div id="cxUpload" class="cx-upload"> <button id="pickfiles" class="uploadBtn">上传</button> </div> </template> <script&g

  • Vue2.0利用vue-resource上传文件到七牛的实例代码

    Vue2.0利用vue-resource上传文件到七牛的实例代码

    本文介绍了Vue2.0利用vue-resource上传文件到七牛,分享给大家,希望对大家有帮助 关于上传,总是有很多可以说道的. 16年底,公司项目番茄表单的前端部分,开始了从传统的jquery到vue 2.0的彻底重构.但是上传部分,无论是之前的传统版本,还是Vue新版本,都是在使用着FileAPI这款优秀的开源库,只是进行了简单的directive化.为什么呢?因为兼容性.没办法,公司项目不等同于个人项目,必须要考虑大多数浏览器.否则,上传部分完全可以利用Vue-Resource以及Form

  • 将 vue 生成的 js 上传到七牛的实例

    将 vue 生成的 js 上传到七牛的实例

    一般 vue 的项目,大家都是直接把最后生成的 css js 等文件直接上传到服务器,并没有才有 cdn 的业务 这样做一般有2个弊端, 增加服务器带宽压力,访问量一旦上去,服务器就可能因为带宽压力挂掉 部分地区访问速度会变慢 不过虽然知道归知道,但是每次都手动把 js css 文件传到七牛上很累的. 尤其是在改动频繁的情况下,上传七牛每次上传七牛 cdn 很浪费时间. 于是就去找七牛的文档,决定用脚本来解决这个问题,我是用的 python sdk 实现得. python 环境请自行安装 首先下

  • 定时备份 Mysql并上传到七牛的方法

    多数应用场景下,我们需要对重要数据进行备份.并放置到一个安全的地方,以备不时之需. 常见的 MySQL 数据备份方式有,直接打包复制对应的数据库或表文件(物理备份).mysqldump 全量逻辑备份.xtrabackup 增量逻辑备份等. 常见的数据存储方式有,本机存储.FTP 上传到远程服务器.云存储(如阿里云OSS.七牛云存储等).甚至本地也行. 我们可能不想每次都手动去备份,也不想每次都那么耗时间的去下载,也不想就放在服务器上丢了,因为我们需要异地备份.那我们可以尝试,写个脚本定时备份数据

  • PHP实现Markdown文章上传到七牛图床的实例内容

    在使用 Markdown 编写文章之后,经常需要发布到不同的平台,这里会遇到一个问题,文章的图片需要手动的进行上传,管理起来非常不方便,因此,强烈建议将图片统一上传到图床中,这样的话一篇文章就可以轻松的同步到各大平台上面了.下面,用 PHP 来实现该功能,选用 七牛云 作为图床 创建并进入项目 $ mkdir markdown-images-to-qiniu $ cd markdown-images-to-qiniu 安装七牛官方的扩展 $ composer require qiniu/php-

  • JS上传前预览图片实例

    预览图片的js代码: 复制代码 代码如下: <script type="text/javascript">        function setImagePreview(docObj,localImagId,imgObjPreview)         {            if(docObj.files && docObj.files[0])            {                //火狐下,直接设img属性            

  • Python的Django中将文件上传至七牛云存储的代码分享

    最近在写的一个django小项目需要实现用户上传图片的功能,使用到了七牛云存储,特此记录下来.这里我使用的七牛python SDK 版本是7.0.3,函数使用上可能会与旧版有些不同. 原本文件上传需要先把文件上传到自己的业务服务器,再从业务服务器上传到云存储.现在七牛的表单上传可以直接把文件上传到七牛,不再需要业务服务器的中转,节省了流量成本,降低了业务服务器的压力.而且通过设置,还可以在文件上传完成后让客户端自动重定向到一个上传成功的结果页面.这里我就是使用了七牛的表单上传. 表单上传 用户上

  • node koa2实现上传图片并且同步上传到七牛云存储

    因为升级到新的node版本,之前的通过很多上传图片的方式都已经不适用了,所以自己就写了一个对于 koa2上传图片的小demo,记录一下心得. 废话不多说,下面直接上代码,里面都有注释. const Koa = require('koa'); const route = require('koa-route'); const serve = require('koa-static'); const inspect = require('util').inspect const path = req

  • android递归压缩上传多张图片到七牛的实例代码

    最近遇到这样一个需求:要做一个仿微信朋友圈的功能,要求上传最多九张图到七牛.七牛有上传图片的接口,但是每次只能上传一张.如果是九张图片一齐上传,使用for循环的话肯定不行的,很容易出错.因为上传七牛的动作是在子线程完成的,for循环是在主线程的,这就相当于同时开启十个子线程来上传图片,而且都是耗时线程,很容易会ANR的. 最好的解决办法应该是先压缩图片,在200k-300k之间,保证图片不失真,然后一张一张上传,通过七牛的回调,来判断上一张图片是否上传完成,上传完成了,再上传下一张图片. 好了,

  • vue项目打包后上传至GitHub并实现github-pages的预览

    vue项目打包后上传至GitHub,并实现github-pages的预览 1. 打包vue 项目 vue项目: 命令行输入打包命令npm run build,生成了dist文件夹: 打包完成. 打包常见问题1--项目资源无法加载 打开刚刚打包好的dist文件夹,浏览器打开index.html 发现该页面是空白的,打开控制台发现 这里看到index.html文件中没有加载任何css.js文件. 解决方法--修改config文件 打开项目根目录config下的index.js文件,进行如下修改: 即

  • vue+element实现图片上传及裁剪功能

    本文实例为大家分享了vue+element实现图片上传及裁剪的具体代码,供大家参考,具体内容如下 随便写的一个小demo 功能是没有任何问题 可能里面会有一些小细节没有优化 1 .安装 vue-cropper npm install vue-cropper 2.组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, 具体可见官网 demo <template> <div> <h1&

  • Vue中通过minio上传文件的详细步骤

    Vue中通过minio上传文件的详细步骤

    目录 1.minio的安装 2.minio.js文件 2.1连接minio 2.2通过stream流上传 2.3通过带预签名的url上传(最好是minio设置了链接永久访问) 2.4删除对象 补充:base64转blob 3.获取时间方法 4.minio设置链接永久访问(客户端) 5.解决跨域问题 6.存储大小限制问题 7.minio官方文档 8.minio设置链接永久访问(其他方法) 总结 在Vue中minio上传文件(stream流和链接) 1.minio的安装 直接使用npm或者cnpm下

随机推荐