项目中 在自动化没流行之前 经常需要经历这几步：
npm run build- 然后
用工具 打包成 zip - 再
上传到 云服务器上
这里主要通过2种方法记录一下 合并一下前2步。
当然！！！自动化CI/CD 才是最终选择。
一、bash 下的sh tar压缩
1.根目录下新建build.sh
#!/bin/sh
# 判断目录是不是已经存在，如果不存在则创建，存在则输出“dir exist”
# dirname=$1 则可以执行命令时传入参数:sh test.sh dist(创建名称为dist的目录)
dirname='source'
echo "the dir name is $dirname"
if [ ! -d $dirname ];then
mkdir $dirname
else
echo dir exist
fi
# bash 下的sh gz压缩 :tar -czf dist/dist.zip dist
tar -czf $dirname/dist.tar.gz dist
echo 打包成功,输出位置为:[`pwd`/$dirname/dist.tar.gz]
语法 tar -czf 输出目标目录/文件名 需要打包的指定目录
2.package.json 中配置 script 命令 ‘build:post’
{
...
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"build:post": "vue-tsc --noEmit && vite build && sh build.sh", // 这一句
"preview": "vite preview"
},
...
}
3.使用git bash 命令行工具
VSCode新建终端时选择bash
4.输入命令即可：
yarn build:post
最后会在dist中生成文件dist.tar.gz dist
二、node 插件 compressing 打包形式
1.安装模块
npm i compressing dayjs -D
2.根目录下新建zip.js
const path = require("path");
const {resolve} = require("path");
const fs = require("fs");
const compressing = require("compressing");
const dayjs = require("dayjs");
// const resolve = dir => path.join(__dirname, "..", dir);
const zipPath = resolve("zip");
const zipName = (() => `zip/dist_${dayjs().format("YYYYMMDD_HHmmss")}.zip`)();
// 判断是否存在当前zip路径，没有就新增
if (!fs.existsSync(zipPath)) {
fs.mkdirSync(zipPath);
}
// 清空 zip 目录
const zipDirs = fs.readdirSync("./zip");
if (zipDirs && zipDirs.length > 0) {
for (let index = 0; index < zipDirs.length; index++) {
const dir = zipDirs[index];
const dirPath = resolve(__dirname, "zip/" + dir)
console.log("del ===", dirPath);
fs.unlinkSync(dirPath)
}
}
compressing.zip
.compressDir(resolve("dist/"), resolve(zipName))
.then(() => {
console.log(`Tip: 文件压缩成功，已压缩至【${resolve(zipName)}】`);
})
.catch(err => {
console.log("Tip: 压缩报错");
console.error(err);
});
3.package.json 中配置 script 命令 ‘build:zip’
{
...
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"build:post": "vue-tsc --noEmit && vite build && sh build.sh",
"build:zip": "vue-tsc --noEmit && vite build && node ./zip.js",//这一句
"preview": "vite preview"
},
...
}
4.输入命令即可：
yarn build:zip
最后会在zip中生成文件dist_20220330_193342.zip
记录在git：gitee.com/cheerqjy/pa… 欢迎去start
参考：
