將 vue 產生的 js 上傳到七牛的執行個體，vuejs

將 vue 產生的 js 上傳到七牛的執行個體，vuejs

一般 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.configimport glob2import os#需要填寫你的 Access Key 和 Secret Keyaccess_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/ 的所有檔案上傳到七牛，包括 字型檔 ， 圖片等。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。