将 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实现轮显新闻标题链接
Aug 13 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
php发送post请求的三种方法
2014/02/11 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
php进程间通讯实例分析
2016/07/11 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
python类继承用法实例分析
2015/05/27 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
wxPython实现带颜色的进度条
2019/11/19 Python
python 导入数据及作图的实现
2019/12/03 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
2015大学生求职信范文
2015/03/20 职场文书
原告离婚代理词
2015/05/23 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
git stash(储藏)的用法总结
2022/06/25 Servers