将 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 相关文章推荐
javascript innerText和innerHtml应用
Jan 28 Javascript
jquery 插件学习(六)
Aug 06 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
express express-session的使用小结
Dec 12 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
对layui中的onevent 和event的使用详解
Sep 06 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
二进制交叉权限微型php类分享
2014/02/07 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
Python多层装饰器用法实例分析
2018/02/09 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
Linux操作面试题
2012/05/16 面试题
上课说话检讨书大全
2014/01/22 职场文书
学校党员对照检查材料
2014/08/28 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
计算机教师工作总结
2015/08/13 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers