将 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 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
vue 递归组件的简单使用示例
Jan 14 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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
php header Content-Type类型小结
2011/07/03 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
vue实现计算器功能
2020/02/22 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
[03:48]大碗DOTA
2019/07/25 DOTA
Python单体模式的几种常见实现方法详解
2017/07/28 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python实现抖音点赞功能
2019/04/07 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
python主要用于哪些方向
2020/07/05 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
什么是岗位职责
2013/11/12 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
将相和教学反思
2014/02/04 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
创业计划书之美甲店
2019/09/20 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
Java界面编程实现界面跳转
2022/06/16 Java/Android