因为gz压缩只能压缩代码，所以vue3 vite完成gz压缩后，文件仍然很大，项目中仍然有很多图片，以及字体文件等，这时候我们可以考虑使用cdn加速。
因为七牛每个月免费提供10g的流量，所以这里我们使用七牛云，在使用七牛云前，我们首先要注册一个七牛云
使用前我们要考虑自动化，编译完文件后就自动上传到七牛云，不用我们手动上传，所以我们需要配置nodejs自动上传文件
安装依赖
我们需要安装依赖，要使用七牛云，所以我们首先安装qiniu,要实现自动上传，我们需要读取文件，所以我们需要安装path 和 fs这两个插件。
pnpm i path fs qiniu
配置七牛
创建一个js qiniu-upload-prefiex.js
这是一个配置文件，用来
prefix配置七牛的上传目录，文件会上传到这个目录下
prefixhost配置七牛绑定的域名，文件会上传后会通过这个地址访问文件
accessKey七牛accessKey 七牛上传文件前进行鉴权，可以在七牛后台申请
secretKey七牛secretKey
space 在七牛上的空间名称
export default {
prefix: 'demo/shujuzichan/', // 七牛目录
prefixhost: '//images.wanjunshijie.com/', //七牛cdn绑定的域名
accessKey: '', //七牛accessKey
secretKey: '', //七牛secretKey
space: 'wanjun', //七牛空间名
}
创建上传文件
创建一个js用来处理打包完成后的文件，将文件上传到七牛qiniu.js
import path from 'path'
import fs from 'fs'
import qiniu from 'qiniu'
import qiniuPrefix from './qiniu-upload-prefiex.js'
// 没有密钥的话就不执行上传
if (!qiniuPrefix.accessKey) {
return
}
//自己七牛云的秘钥
var accessKey = qiniuPrefix.accessKey
var secretKey = qiniuPrefix.secretKey
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
var config = new qiniu.conf.Config()
// 空间对应的机房，zone_z1代表华北，其他配置参见七牛云文档
// Zone_z0 华东
// Zone_z1 华北
// Zone_z2 华南
// Zone_na0 北美
// Zone_as0 东南亚
// Zone_cn-east-2 华东-浙江2
config.zone = qiniu.zone.Zone_z0
// 是否使用https域名
config.useHttpsDomain = true
// 上传是否使用cdn加速
config.useCdnDomain = true
var formUploader = new qiniu.form_up.FormUploader(config)
var putExtra = new qiniu.form_up.PutExtra()
//文件前缀
const prefix = qiniuPrefix.prefix
main()
function main() {
displayFile('./dist')
}
function upload(key, localFile) {
var Bucket = key
var options = {
scope: Bucket,
}
var putPolicy = new qiniu.rs.PutPolicy(options)
var uploadToken = putPolicy.uploadToken(mac)
let str = null
if (localFile.indexOf("./dist\\") >= 0) {
str = localFile.replace("./dist\\", "")
} else if (localFile.indexOf("./dist/") >= 0) {
str = localFile.replace("./dist/", "")
} else {
str = localFile
}
key = prefix + str
key = key.replace("\\", "/")
formUploader.putFile(uploadToken, key, localFile, null, function (respErr, respBody, respInfo) {
if (respErr) {
console.log(localFile + "文件上传失败,正在重新上传-----------")
upload(qiniuPrefix.space, localFile)
} else {
if (respInfo.statusCode == 200) {
console.log(respBody)
} else {
console.log(respInfo.statusCode)
console.log(respBody)
if (respBody.error) {
console.log(respBody.error)
}
}
}
})
}
function displayFile(param) {
//转换为绝对路径
//var param = path.resolve(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)
//var absolutePath = path.resolve(path.join(param, e));
displayFile(absolutePath)
})
})
} else {
//file2/这里是空间里的文件前缀
var key = qiniuPrefix.space
var localFile = './' + param
if (!localFile.endsWith(".gz")) {
upload(key, localFile)
}
}
})
}
配置文件地址
创建完qiniu后，我们需要配置打包后页面资源的地址，在之前vite打包后，引用的是相对路径下的文件，所以我们要调整一下
创建一个config.js文件，
我们配置一下，引入我们的七牛配置文件，考虑到用户没有使用七牛，所以如果没有配置密钥的话，资源地址仍然和开发环境下的资源地址一致
import data from '../../qiniu-upload-prefiex.js'
var developmentUrl = '' // 开发地址
var productionUrl = data.accessKey ? data.prefixhost + data.prefix : developmentUrl //生产地址
var links = process.env.NODE_ENV === 'production' ? productionUrl : developmentUrl
export const link = links
找到vite.config.js,我们添加base参数，用来配置页面资源地址
import {link} from "./src/config/config.js";
export default ({mode}) => {
return defineConfig({
base: link,
});
}
打包命令修改
找到package.json,修改打包命令，追加执行nodejs命令qiniu.js
"scripts": {
"dev": "vite",
"build": "vite build && node ./qiniu.js",
"preview": "vite preview"
},
vue3 vite可视化数据大屏项目使用七牛cdn加速的介绍到这里就结束了。
