将 vue 生成的 js 上传到七牛的实例

更新时间：2017年07月28日 09:11:04 作者：jackPan

本篇文章主要介绍了将 vue 生成的 js 上传到七牛的实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一般 vue 的项目，大家都是直接把最后生成的 css js 等文件直接上传到服务器，并没有才有 cdn 的业务

这样做一般有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 同级目录下，如下图：

image.png

脚本中的 access_key secret_key 你登录七牛后在个人资料中即可找到：

还需要将 webpack 的 publicPath 改成七牛的地址即改成下面这个

在 vue 的项目中，只需要改动 config 目录下面的 index.js 即可

虽然改动起来有一点小麻烦，但是一劳永逸，

首先 npm run build

然后 python upqiniu.py

最后将你的 index.html 拉到线上服务器就可以了。

ps: 这个脚本会将 dist/static/ 的所有文件上传到七牛，包括字体文件，图片等。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解基于vue的服务端渲染框架NUXT
这篇文章主要介绍了Nuxt之vue服务端渲染，NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
详解Vue如何实现响应式布局
这篇文章主要为大家详细介绍了Vue实现响应式布局的两种方法,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下
2023-12-12
解决vue项目 build之后资源文件找不到的问题
这篇文章主要介绍了解决vue项目 build之后资源文件找不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue中点击下载图片的实现方法
这篇文章主要给大家介绍了关于vue中点击下载图片的实现方法,在Vue的模板中,我们可以将下载属性绑定至或元素上,用来实现点击下载,需要的朋友可以参考下
2023-08-08
element自定义多文件上传触发多次on-change问题
这篇文章主要介绍了element自定义多文件上传触发多次on-change问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
详解Vue2 添加对scss的支持
这篇文章主要介绍了详解Vue2 添加对scss的支持，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
Vue.js中兄弟组件之间互相传值实例
本篇文章主要介绍了Vue.js中兄弟组件之间互相传值实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue实现验证码倒计时按钮
这篇文章主要为大家详细介绍了vue实现验证码倒计时按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
django+vue实现注册登录的示例代码
这篇文章主要介绍了django+vue实现注册登录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
vue监听路由变化时watch方法会执行多次的原因及解决
这篇文章主要介绍了vue监听路由变化时watch方法会执行多次的原因及解决，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-04-04