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

相关推荐
gaolei_eit1 小时前
Vue3项目ES6转ES5,兼容低版本的硬件设备,React也
javascript·react.js·es6
一位搞嵌入式的 genius1 小时前
从 ES6 到 ESNext:JavaScript 现代语法全解析(含编译工具与实战)
前端·javascript·ecmascript·es6
linweidong3 小时前
C++ 模块化编程(Modules)在大规模系统中的实践难点?
linux·前端·c++
leobertlan6 小时前
2025年终总结
前端·后端·程序员
子兮曰7 小时前
OpenClaw架构揭秘:178k stars的个人AI助手如何用Gateway模式统一控制12+通讯频道
前端·javascript·github
Howrun7777 小时前
VSCode烦人的远程交互UI讲解
ide·vue.js·vscode
百锦再7 小时前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
莲华君7 小时前
React快速上手:从零到项目实战
前端·reactjs教程
百锦再7 小时前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
易安说AI8 小时前
Ralph Loop 让Claude无止尽干活的牛马...
前端·后端