将 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 相关文章推荐
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 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 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
express的中间件cookieParser详解
2014/12/04 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python读写配置文件的方法
2015/06/03 Python
Python实现字典的key和values的交换
2015/08/04 Python
Python for循环生成列表的实例
2018/06/15 Python
python多线程并发实例及其优化
2019/06/27 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
写好自荐信的要点
2013/11/06 职场文书
保安岗位职责
2014/02/21 职场文书
公司管理建议书范文
2014/03/12 职场文书
小学一年级评语大全
2014/04/22 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
预备党员群众意见
2015/06/01 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书