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

相关推荐
Java 码农6 分钟前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan30 分钟前
[electron]开发环境驱动识别失败
前端·javascript·electron
nyf_unknown34 分钟前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js
胡gh38 分钟前
数组开会:splice说它要动刀,map说它只想看看。
javascript·后端·面试
胡gh1 小时前
浏览器:我要用缓存!服务器:你缓存过期了!怎么把数据挽留住,这是个问题。
前端·面试·node.js
你挚爱的强哥1 小时前
SCSS上传图片占位区域样式
前端·css·scss
奶球不是球1 小时前
css新特性
前端·css
Nicholas681 小时前
flutter滚动视图之Viewport、RenderViewport源码解析(六)
前端
无羡仙1 小时前
React 状态更新:如何避免为嵌套数据写一长串 ...?
前端·react.js
TimelessHaze2 小时前
🔥 一文掌握 JavaScript 数组方法(2025 全面指南):分类解析 × 业务场景 × 易错点
前端·javascript·trae