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

相关推荐
wxr06164 分钟前
部署Spring Boot项目+mysql并允许前端本地访问
前端·spring boot·mysql·持续部署
假装我不帅10 分钟前
jquery-validation使用
前端·javascript·jquery
怕浪猫15 分钟前
React从入门到出门第六章 事件代理机制与原生事件协同
前端·javascript·react.js
天府之绝19 分钟前
uniapp 中使用uview表单验证时,自定义扩展的表单,在改变时无法触发表单验证处理;
开发语言·前端·javascript·vue.js·uni-app
be or not to be20 分钟前
Html-CSS动画
前端·css·html
初恋叫萱萱25 分钟前
技术基石与职场进阶:构建从Web后端到高性能架构的完整知识图谱
前端·架构·知识图谱
木木木一29 分钟前
Rust学习记录--C9 错误处理
前端·学习·rust
局外人LZ31 分钟前
libsodium.js:web端与 Node.js 的现代加密工具集,构建前端安全加密体系
前端·javascript·node.js
xkxnq36 分钟前
第二阶段:Vue 组件化开发(第 20天)
前端·javascript·vue.js
哈__40 分钟前
React Native 鸿蒙跨平台开发:Keyboard 键盘控制
javascript·react native·react.js