將 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里建立長按指令
這篇文章主要介紹了詳解如何在Vue里建立長按指令，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
vue+swiper實現(xiàn)組件化開發(fā)的實例代碼
這篇文章主要介紹了vue+swiper實現(xiàn)組件化開發(fā)的相關資料,需要的朋友可以參考下
2017-10-10
vue.js打包之后可能會遇到的坑！
這篇文章主要給大家介紹了關于vue.js打包之后可能會遇到的一些坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-06-06
Vue3組件間的通信方式詳解
這篇文章主要介紹了Vue3組件間的通信方式，在使用vue時，我們經常會把不同的模塊拆分成不同的組件，而組件之間有的需要傳遞數(shù)據，所以組件間的數(shù)據通信就非常重要了
2023-04-04
vue組件系列之TagsInput詳解
TagsInput 是一種可編輯的輸入框，通過回車或者分號來分割每個標簽，用回退鍵刪除上一個標簽。這篇文章主要介紹了vue組件TagsInput的相關知識,需要的朋友可以參考下
2020-05-05
Vue必學知識點之forEach()的使用
在前端開發(fā)中，經常會遇到一些通過遍歷循環(huán)來獲取想要的內容的情形，這時候就需要用到forEach()了，下面這篇文章主要給大家介紹了關于Vue必學知識點之forEach()使用的相關資料，需要的朋友可以參考下
2021-05-05
在vue-cli的組件模板里使用font-awesome的兩種方法
今天小編就為大家分享一篇在vue-cli的組件模板里使用font-awesome的兩種方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue?Echarts實現(xiàn)帶滾動效果的柱形圖
這篇文章主要為大家詳細介紹了Vue?Echarts實現(xiàn)帶滾動效果的柱形圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04