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

相关推荐
by__csdn3 分钟前
Vue 中计算属性、监听属性与函数方法的区别详解
前端·javascript·vue.js·typescript·vue·css3·html5
on_pluto_23 分钟前
【debug】关于如何让电脑里面的两个cuda共存
linux·服务器·前端
r***F26237 分钟前
Go-Gin Web 框架完整教程
前端·golang·gin
chilavert31840 分钟前
技术演进中的开发沉思-220 Ajax:XMLHttpRequest 对象
前端·javascript
IT_陈寒1 小时前
Python开发者必看:5个被低估但能提升200%编码效率的冷门库实战
前端·人工智能·后端
g***78911 小时前
鸿蒙NEXT(五):鸿蒙版React Native架构浅析
android·前端·后端
q***71851 小时前
Webpack、Vite区别知多少?
前端·webpack·node.js
千里念行客2401 小时前
国产射频芯片“小巨人”昂瑞微今日招股 拟于12月5日进行申购
大数据·前端·人工智能·科技
你挚爱的强哥2 小时前
【sgSelectExportDocumentType】自定义组件:弹窗dialog选择导出文件格式word、pdf,支持配置图标和格式名称,触发导出事件
vue.js·pdf·word
小杨快跑~2 小时前
Vue 3 + Element Plus 表单校验
前端·javascript·vue.js·elementui