.vue文件_Vue编译出静态文件上传七牛CDN

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打包出来的静态资源文件上传到七牛云。