网站开发后 怎么换前端住房
在前端项目开发中，构建完成后通常需要将生成的 dist 目录打包成压缩文件，方便发版、备份或上传到服务器。本文将分享一个基于 Node.js 的简单脚本，自动读取项目名，将 dist 文件夹压缩成 ZIP 文件，简化打包流程。
项目环境及版本
技术栈：Vue2（2.6.12）、ES6
运行环境：Node（v14.17.6）、Npm（6.14.15）
一、实现步骤
- 创建 build-zipper.js 文件
读取项目名：通过读取项目根目录的package.json文件，获取name字段作为压缩包名称，避免硬编码。
const packageJson = require('./package.json')
const projectName = packageJson.name || 'project'
定义压缩目录和输出路径：使用 path.resolve 获取绝对路径，确保跨平台兼容。
const distPath = path.resolve(__dirname, 'dist')
const outputPath = path.resolve(__dirname, `${projectName}.zip`)
压缩函数实现：创建写入流 output，指向输出 ZIP 文件。
创建 archiver 实例，指定压缩格式为 zip，压缩级别为 9（最高）。
监听写入流的 close 事件，打印压缩完成信息。
监听 archiver 的 error 事件，捕获压缩错误。
使用 archive.directory 将整个目录压缩，第二个参数 false 表示不包含根目录名。
调用 archive.finalize() 开始压缩。
const output = fs.createWriteStream(outPath)
const archive = archiver('zip', { zlib: { level: 9 } })return new Promise((resolve, reject) => {output.on('close', () => {console.log(`压缩完成，文件大小：${archive.pointer()} 字节`)resolve()})archive.on('error', (err) => reject(err))archive.pipe(output)archive.directory(sourceDir, false)archive.finalize()})
调用压缩函数并处理结果：使用 Promise 处理异步流程，成功时打印完成提示，失败时打印错误并退出进程。
zipDirectory(distPath, outputZipPath).then(() => {console.log(`打包并压缩完成！`)}).catch((err) => {console.error('压缩失败:', err)process.exit(1)})
完整代码：
const fs = require('fs')
const archiver = require('archiver')
const path = require('path')/** 读取 package.json 获取项目名 */
const packageJson = require('./package.json')
const projectName = packageJson.name || 'project'/** 需要压缩的文件夹 */
const distPath = path.resolve(__dirname, 'dist')
/** 输出的 zip 文件路径 */
const outputPath = path.resolve(__dirname, `${projectName}.zip`)/** 压缩文件夹 */
function zipDirectory(sourceDir, outPath) {const output = fs.createWriteStream(outPath)const archive = archiver('zip', { zlib: { level: 9 } })return new Promise((resolve, reject) => {output.on('close', () => {console.log(`压缩完成，文件大小：${archive.pointer()} 字节`)resolve()})archive.on('error', (err) => reject(err))archive.pipe(output)archive.directory(sourceDir, false)archive.finalize()})
}zipDirectory(distPath, outputPath).then(() => {console.log(`打包并压缩完成！`)}).catch((err) => {console.error('压缩失败:', err)process.exit(1)})- 脚本的运行使用
修改package.json文件中的scripts构建命令行，添加 && node build-zipper.js
"build": "vue-cli-service build && node build-zipper.js",
在终端运行该命令行npm run build
npm run build
二、实现效果
三、注意事项
- archiver需指定版本：
"archiver": "^5.3.0"，由于项目Node版本为14.17.6，若archiver版本过高，会导致运行脚本报错：Cannot find module ‘node:url’。 - 压缩包输出目录可以按需修改，如输出至电脑桌面：
const os = require('os')const desktopDir = path.join(os.homedir(), 'Desktop')
const outputZipPath = path.join(desktopDir, `${projectName}.zip`)
- 兼容性增强：增加 Node.js 版本检测，确保环境支持。
总结
本文介绍的 Node.js 脚本，利用 archiver 实现了自动读取项目名并压缩 dist 目录的功能，简单高效，适合日常项目打包需求。通过自动化脚本，减少了手动操作，提高了构建发布的效率和规范性。
大家可根据项目需求，灵活调整脚本，打造符合自己团队的自动化构建流程！-