当前位置: 首页 > news >正文

vue 一键打包上传

npm run build之后,将dist文件夹自动压缩,通过ssh自动连接服务器,把压缩包放到指定目录下,然后自动解压

根目录创建gulpfile.js文件

const gulp = require('gulp');
const GulpSSH = require('gulp-ssh');
const archiver = require('archiver');
const fs = require('fs');
const path = require('path');
const { exec } = require('child_process');
// 文件路径
const prodWebPath = "/www/wwwroot/test.new.ssss.cn/public";
// 服务器配置
const gulpSSHProd = new GulpSSH({ignoreErrors: false,sshConfig: {host: "112.12.126.59",username: "root",password: "mlztgc",}
});const zipFileName = 'dist.zip';
const zipFilePath = path.join(process.cwd(), zipFileName);// 1. 压缩 dist 文件夹
gulp.task('compress', (done) => {const output = fs.createWriteStream(zipFilePath);const archive = archiver('zip', { zlib: { level: 9 } });output.on('close', done);archive.on('error', done);archive.pipe(output);archive.directory('dist/', false);archive.finalize();
});// 2. 上传压缩包到服务器
// 2. 上传压缩包到服务器
gulp.task('upload', (done) => {exec(`scp ${zipFilePath} root@112.12.126.59:/${prodWebPath}/dist.zip`, (err, stdout, stderr) => {if (err) {console.error('SCP 上传失败:', err, stderr);done(err);} else {console.log('SCP 上传成功:', stdout);done();}});});// // 3. 远程解压
gulp.task('extract', () => {const cmd = [`cd ${prodWebPath}`,'unzip -o /tmp/dist.zip','rm -f /tmp/dist.zip'].join(' && ');return gulpSSHProd.exec(cmd, { filePath: 'extract.log' });
});// // 4. 删除本地压缩包
gulp.task('clean', (done) => {if (fs.existsSync(zipFilePath)) fs.unlinkSync(zipFilePath);done();
});// 一键部署
gulp.task('deploy', gulp.series('compress', 'upload','extract','clean'));

安装依赖

npm install gulp gulp-ssh --save

npm install archiver

修改打包命令 package.json

"build": "vue-cli-service build && gulp deploy",

第一次连接需要输入 yes,后面打包就只需要输入密码就可上传解压

http://www.dtcms.com/a/349714.html

相关文章:

  • 【车载开发系列】汽车零部件DV与PV试验的差异
  • 【QT/C++】实例理解类间的六大关系之组合关系(Composition)
  • 农业气象监测站:像敏锐的精灵,捕捉农业气象的每一丝变化
  • 18 继续学习
  • 【图像处理基石】基于Real-ESRGAN的实时图像超分辨率技术实现
  • 【GPT-5 与 GPT-4 的主要区别?】
  • 零基础也能写博客:cpolar简化Docsify远程发布流程
  • 基于波前编码成像系统模拟及图像复原的MATLAB实现
  • GPT5的Test-time compute(测试时计算)是什么?
  • 《C++ Primer 第五版》 initializer_list
  • 记一次 element-plus el-table-v2 表格滚动卡顿问题优化
  • Vue SFC Playground 如何正确引入 naive-ui
  • Kubernetes高可用架构设计:多Master节点部署与etcd集群运维深度指南
  • 6.3Element UI 的表单
  • Odoo 非标项目型生产行业解决方案:专业、完整、开源
  • 第十七节:高级材质 - ShaderMaterial揭秘
  • SOME/IP-SD报文中 Entry Format(条目格式)-理解笔记4
  • 从“数据孤岛”到“业财融合”,外贸订单管理ERP重构一体化逻辑
  • 将跨平台框架或游戏引擎开发的 macOS 应用上架 Mac App Store
  • springboot中操作redis的步骤
  • 6.4 Element UI 中的 <el-table> 表格组件
  • 疯狂星期四文案网第49天运营日记
  • 疯狂星期四文案网第50天运营日记
  • 渗透测试报告编写平台 | 简化和自动化渗透测试报告的生成过程。
  • JVM 与容器化部署优化:突破资源隔离的性能瓶颈
  • Ant Design for UI 选择下拉框
  • 详细介绍Vue-Router及其实现原理、路由模式
  • 探索汽车材料新纪元:AUTO TECH 2025广州先进汽车材料展即将震撼来袭
  • Linux系统编程——进程 | 线程
  • SSM基础知识-SpringMVC-视图解析(ModelAndView)、方法请求参数接收、方法返回值处理、RESTful 风格、拦截器、全局异常