将 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 相关文章推荐
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
javascript检测两个数组是否相似
May 19 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 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垃圾回收机制对内存泄露的处理
2013/06/14 PHP
php定界符
2014/06/19 PHP
分享php分页的功能模块
2015/06/16 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python实现连续图文识别
2018/12/18 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
在pycharm中实现删除bookmark
2020/02/14 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
车间工艺员岗位职责
2013/12/09 职场文书
初中美术教学反思
2014/01/29 职场文书
财务个人年度总结范文
2015/02/26 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
导游词之湖北武当山
2019/09/23 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
详细介绍python类及类的用法
2021/05/31 Python
JavaScript文档对象模型DOM
2021/11/20 Javascript
vue实现登陆页面开发实践
2022/05/30 Vue.js