将 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 相关文章推荐
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
Jquery判断$("#id")获取的对象是否存在的方法
Sep 25 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 Javascript
Vue与React的区别和优势对比
Dec 18 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/10/09 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python中模块查找的原理与方法详解
2017/08/11 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
python绘制地震散点图
2019/06/18 Python
django使用xadmin的全局配置详解
2019/11/15 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
python实现打砖块游戏
2020/02/25 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
工商企业管理实习自我鉴定
2013/12/04 职场文书
试用期员工考核制度
2014/01/22 职场文书
学校门卫管理制度
2014/01/30 职场文书