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


Posted in Javascript onJuly 28, 2017

一般 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 同级目录下,如下图:

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

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

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

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

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

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

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

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

首先 npm run build

然后 python upqiniu.py

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
jquery实现全屏滚动
Dec 28 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 #Javascript
详解React 16 中的异常处理
Jul 28 #Javascript
JavaScript截屏功能的实现代码
Jul 28 #Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 #Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 #Javascript
js 获取html5的data属性实现方法
Jul 28 #Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 #jQuery
You might like
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
php简单统计在线人数的方法
2016/05/10 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Tornado 多进程实现分析详解
2018/01/12 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
Django用户认证系统 User对象解析
2019/08/02 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
python 调整图片亮度的示例
2020/12/03 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
英语专业推荐信
2013/11/16 职场文书
会议主持词
2014/03/17 职场文书
学生自我评语
2015/01/04 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python