将 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的无刷新分页技术
Jun 11 Javascript
jquery 笔记 事件
Nov 02 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
详解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
第五节--克隆
2006/11/16 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
异步加载script的代码
2011/01/12 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
js实现简易计算器功能
2019/10/18 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
python实现下载整个ftp目录的方法
2017/01/17 Python
详解Python字符串切片
2019/05/20 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
初入社会应届生求职信
2013/11/18 职场文书
园林毕业生自我鉴定范文
2013/12/29 职场文书
社会实践感言
2014/01/25 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
会计专业自荐信范文
2019/05/22 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python