这个事情,是为了能自动部署的
就是项目打包后,自动压缩文件,然后去向一个后台提供的接口上传这个压缩文件。从而实现自动部署
const path = require('path')
const fs = require('fs')
const archiver = require('archiver')//这个就是用于压缩的包
const axios = require('axios') //axios 需要引入
const FormData = require('form-data')//这个是node 的 form包
//组装两个路径,一个输入路径,一个输出路径
//我这里是nuxt项目所以后面是.nuxt文件夹,通常,vue的是dist文件夹
const filePath = path.resolve(__dirname, './.nuxt/')
const zipPath = path.resolve(__dirname, './.nuxt.zip')
//导出这个函数
export function deploy(){
const output = fs.createWriteStream(zipPath)//设置一下输出流
const archive = archiver('zip', {
zlib: {
level: 9//这个配置是配置压缩等级,我没具体研究,直接使用了9
}
})
archive.directory(filePath, false)
archive.pipe(output) // 将打包对象与输出流关联
// 监听所有archive数据都写完
output.on('close', function () {
console.log('压缩完成', archive.pointer() / 1024 / 1024 + 'M')
postZip()
})
archive.on('error', function (err) {
throw err
})
// 打包
archive.finalize()
}
// 发送请求部署代码
function postZip () {
const form = new FormData()
form.append('file', fs.createReadStream(path.resolve(__dirname, './.nuxt.zip')))
axios.post(
'xxxxx',//请求地址,需要后端有这个自动部署功能,并给了你权限
form,
form.getHeaders()//自动获取请求头
).then(res =>
console.log('success')
).catch((err) => {
console.log(err)
})
}
接下来,配置vue的config.js里面,加入这个配置
//引入刚才导出的函数
import { deploy } from "./deploy";
//这里我就随便这么放了,具体放这部分代码的位置,在你的config文件中去放就好
configureWebpack:config => {
config.plugins.push({
apply: (compiler) => {
compiler.hooks.done.tap('deploy', compilation => {
deploy()
});
}
})
}
完成,
npm run build
之后 就会自动压缩,然后上传到指定的请求