將 vue 生成的 js 上傳到七牛的實例
更新時間：2017年07月28日 09:11:04 作者：jackPan
本篇文章主要介紹了將 vue 生成的 js 上傳到七牛的實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一般 vue 的項目，大家都是直接把最后生成的 css js 等文件直接上傳到服務器，并沒有才有 cdn 的業(yè)務
這樣做一般有2個弊端，
- 增加服務器帶寬壓力，訪問量一旦上去，服務器就可能因為帶寬壓力掛掉
- 部分地區(qū)訪問速度會變慢
不過雖然知道歸知道，但是每次都手動把 js css 文件傳到七牛上很累的。
尤其是在改動頻繁的情況下，上傳七牛每次上傳七牛 cdn 很浪費時間。
于是就去找七牛的文檔，決定用腳本來解決這個問題，我是用的 python sdk 實現(xiàn)得。
python 環(huán)境請自行安裝
首先下載七牛的包
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使用codemirror實現(xiàn)一個可插入自定義標簽的textarea
這篇文章主要為大家詳細介紹了Vue如何使用codemirror實現(xiàn)一個可插入自定義標簽的textarea,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
vue動態(tài)添加路由addRoutes之不能將動態(tài)路由存入緩存的解決
這篇文章主要介紹了vue動態(tài)添加路由addRoutes之不能將動態(tài)路由存入緩存的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了詳解如何在Vue里建立長按指令，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue+swiper實現(xiàn)組件化開發(fā)的實例代碼
這篇文章主要介紹了vue+swiper實現(xiàn)組件化開發(fā)的相關資料,需要的朋友可以參考下2017-10-10
這篇文章主要給大家介紹了關于vue.js打包之后可能會遇到的一些坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-06-06
這篇文章主要介紹了Vue3組件間的通信方式，在使用vue時，我們經常會把不同的模塊拆分成不同的組件，而組件之間有的需要傳遞數(shù)據，所以組件間的數(shù)據通信就非常重要了2023-04-04
TagsInput 是一種可編輯的輸入框，通過回車或者分號來分割每個標簽，用回退鍵刪除上一個標簽。這篇文章主要介紹了vue組件TagsInput的相關知識,需要的朋友可以參考下2020-05-05
在前端開發(fā)中，經常會遇到一些通過遍歷循環(huán)來獲取想要的內容的情形，這時候就需要用到forEach()了，下面這篇文章主要給大家介紹了關于Vue必學知識點之forEach()使用的相關資料，需要的朋友可以參考下2021-05-05
在vue-cli的組件模板里使用font-awesome的兩種方法
今天小編就為大家分享一篇在vue-cli的組件模板里使用font-awesome的兩種方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Vue?Echarts實現(xiàn)帶滾動效果的柱形圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04