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,后面打包就只需要输入密码就可上传解压

相关推荐
一周七喜h17 分钟前
在Vue3和TypeScripts中使用pinia
前端·javascript·vue.js
weixin_3954489123 分钟前
main.c_cursor_0202
前端·网络·算法
摘星编程38 分钟前
用React Native开发OpenHarmony应用:Calendar日期范围选择
javascript·react native·react.js
东东5161 小时前
基于vue的电商购物网站vue +ssm
java·前端·javascript·vue.js·毕业设计·毕设
MediaTea1 小时前
<span class=“js_title_inner“>Python:实例对象</span>
开发语言·前端·javascript·python·ecmascript
雨季6661 小时前
Flutter 三端应用实战:OpenHarmony “微光笔记”——在灵感消逝前,为思想点一盏灯
开发语言·javascript·flutter·ui·dart
编码者卢布2 小时前
【Azure Stream Analytic】用 JavaScript UDF 解决 JSON 字段被转成 Record 的关键点
javascript·json·azure
梦梦代码精2 小时前
开源、免费、可商用:BuildingAI一站式体验报告
开发语言·前端·数据结构·人工智能·后端·开源·知识图谱
松树戈2 小时前
滥用AI生图引起的JavaScript heap out of memory排查记录
vue.js·ai编程
0思必得02 小时前
[Web自动化] Selenium执行JavaScript语句
前端·javascript·爬虫·python·selenium·自动化