vue-webpack.config使用七牛雲cdn鏡像加速

1. 配置cdn位址

在config目錄下建立 app.config.js

module.exports = {
  //配置cdn
  cdn:{
    host:'http://xxxxx.clouddn.com/',//七牛雲鏡像位址
    bucket:'vue-xxx',//空間名
    ak:'xxx',//秘鑰
    sk:'xxx',
  }
}
           

2.安裝七牛雲sdk

npm i qiniu -D
           

3. 建立upload.js

位置可以随意,我是放置在跟webpack同級目錄下

//引入qiniu ,fs ,path 
let qiniu = require('qiniu');
let fs = require('fs');
let path = require('path');

//引入配置的cdn
let cdnConfig = require('../config/app.config').cdn;
let {ak,sk,bucket} = cdnConfig

let mac = new  qiniu.auth.digest.Mac(ak,sk)
let config = new qiniu.conf.Config()
config.zone = qiniu.zone.Zone_z0; //區域代碼

//真正的上傳方法
let doUpload = (key,file) => {
  let  options = {
    scope:bucket + ':' + key
  }
  let fromUploader = new qiniu.form_up.FormUploader(config)

  let putExtra = new qiniu.form_up.PutExtra()
  let putPolicy = new qiniu.rs.PutPolicy(options)
  let uploadToken = putPolicy.uploadToken(mac)

  return new Promise((resolve,reject )=>{
    fromUploader.putFile(uploadToken,key,file,putExtra,(err,body,info)=>{
      if(err){
        return reject(err)
      }
      if(info.statusCode === 200){
        resolve(body)
      }else {
        reject(body)
      }
    })
  })

}

//上傳的檔案夾,遞歸上傳,上傳的打包後的檔案,如要上傳本地的public檔案将檔案夾定位到"/public"
let filePaths = path.join(__dirname,"../dist")

let uploadAll = (dir,prefix) => {
  let files = fs.readdirSync(dir)
  files.forEach(file => {
    let filePath = path.join(dir,file)
    //判斷是路徑還是檔案,拼接路徑
    const key = prefix ? `${prefix}/${file}` : file

    if(fs.lstatSync(filePath).isDirectory()){
      return uploadAll(filePath,key)
    }
    doUpload(key,filePath)
      .then(resp =>console.log(resp,"res"))
      .catch(err => console.log(err,"err"))

  })
}
//調用上傳接口
uploadAll(filePaths)
           

4. 在index.js 中更改 build 的assetsPublicPath配置

assetsPublicPath打包配置"/",或者"./"更改到cdn.host位址

對應到webpack.base.conf.js配置中的publicPath

5. package.json配置打包上傳

//直接運作npm run build 
 "build": "node build/build.js && npm rum upload",
 //上傳非打包後或者是已經打包的檔案再上傳 npm run upload
 "upload": "node build/upload.js"

           

6. 打包後的檔案在本地測試

1.在本地建立 myExpressProject檔案夾

cmd進入檔案夾,搭建express本地伺服器,安裝express-generator生成器

npm install express-generator -g

2.建立express項目

express myRunProject

cd myRunProject

3.安裝依賴

npm install

4.項目目錄

5.将dist檔案夾下的所有檔案複制到express項目的public檔案夾下面

6.啟動express項目

npm start

7.通路浏覽器

http://127.0.0.1:3000/

f12可檢視靜态檔案 通路路徑是配置的七牛雲位址