Vue编译出静态文件上传七牛CDN vue打包静态资源配置

Vue作为目前比较流行的前端开发框架，在前后端分离比较时尚的今天异常火热，下面分享下怎么把Vue编译出来的静态文件上传到CDN，在这里主要是七牛云的CDN。

• Vue项目进行编译

编译命令：

npm run build

如果使用yarn做为包管理器的话，使用：

yarn run build

• 申请七牛云存储

想要用七牛云服务，申请账号必不可少，这里不做过多解释，申请完账号就会有对应的开发者秘钥。

下面简单说说使用七牛云的对象存储，访问地址：https://portal.qiniu.com/kodo/bucket

1、新建空间，七牛云存储是以空间的概念进行区分和管理的。

2、创建完空间，即生成一条空间记录，空间名称即是一个bucket。

首先安装七牛云node包：

npm install qiniu --save

上传七牛云核心代码：

var fs = require('fs')
var path = require('path')
var qiniu = require('qiniu')

qiniu.conf.ACCESS_KEY = '七牛key' 
qiniu.conf.SECRET_KEY = '七牛secret'

function upload(key, localFile) {
  const bucket = '七牛空间名称'
  const putExtra = new qiniu.form_up.PutExtra()
  const config = new qiniu.conf.Config()
  config.zone = qiniu.zone.Zone_z1 // 设置时区
  const formUploader = new qiniu.form_up.FormUploader(config)
  const putPolicy = new qiniu.rs.PutPolicy({ scope: `${bucket}:${key}` })
  const uploadToken = putPolicy.uploadToken()

  formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr, respBody, respInfo) {
    if (respErr) {
      throw respErr
    }
    if (respInfo.statusCode === 200) {
      console.log(respBody)
    } else {
      console.log(respInfo.statusCode + ' --- ' + respBody)
      if (respBody.error) {
        console.log(respBody.error)
      }
    }
  })
}

集成到Vue项目结构中（创建js文件，如qiniu.js）：

function replaceAll(str, replaceKey, replaceVal) {
  var reg = new RegExp(replaceKey, 'g') // g就是代表全部
  return str.replace(reg, replaceVal || '')
}

function displayFile(param) {
  fs.stat(param, function(err, stats) {
    if (stats.isDirectory()) {
      fs.readdir(param, function(err, file) {
        file.forEach((e) => {
          var absolutePath = path.join(param, e)
          displayFile(absolutePath)
        })
      })
    } else {
      param = replaceAll(param, '\\\\', '/')
      var key = param.split('dist/')[1]
      var localFile = './' + param
      upload(key, localFile)
    }
  })
}

function main() {
  displayFile('./dist')
}

main()

最后一步，执行node命令上传：

node ./qiniu.js

• 上传文件检查

注意：上传文件后一定要验证文件类型是否正确，不然vue页面引用的时候，会出现无法解析的问题。

到这里，即可实现Vue打包出来的静态资源文件上传到七牛云。