vue自动部署

Vue3 + vite项目利用scp2自动部署到服务器

1、项目根目录下新建deploy文件夹，创建index.js文件

import scpClient  from 'scp2'
import ora  from 'ora'
import chalk  from 'chalk'
import ssh  from 'ssh2'


const spinner = ora(
    '正在发布到测试服务器, plase wait...'
)
const server = {
    domain: '192.168.18.9:22',
    host: '192.168.18.9',
    port: 22,
    username: 'root',
    password: 'Abc123++',
    path: '/www/front/dist'
}



const cleanServerFiles = () => {
  return new Promise((resolve, reject) => {
    const Client = ssh.Client;
    const conn = new Client();



    conn
      .on('ready', () => {
        console.log(chalk.blue('SSH连接成功，开始清理旧文件...'));
        conn.exec(`rm -rf ${server.path}/*`, (err, stream) => {
          if (err) {
            conn.end();
            return reject(err);
          }
          stream
            .on('close', (code, signal) => {
              console.log(chalk.green('旧文件清理完成！'));
              conn.end();
              resolve();
            })
            .on('data', (data) => {
              console.log('STDOUT:', data.toString());
            })
            .stderr.on('data', (data) => {
              console.log('STDERR:', data.toString());
            });
        });
      })
      .on('error', (err) => {
        console.log(chalk.red('SSH连接失败:', err.message));
        reject(err);
      })
      .connect({
        host: server.host,
        port: server.port,
        username: server.username,
        password: server.password
      });
  });
};



const uploadFiles = () => {
  return new Promise((resolve, reject) => {
    console.log(chalk.blue('开始上传新文件...'));
    scpClient.scp(
      './dist',
      {
        host: server.host,
        port: server.port,
        username: server.username,
        password: server.password,
        path: server.path
      },
      (err) => {
        if (err) {
          console.log(chalk.red('文件上传失败.'));
          return reject(err);
        }
        console.log(chalk.green('文件上传成功！'));
        resolve();
      }
    );
  });
};



const deploy = async () => {
  spinner.start();
  try {
    await cleanServerFiles(); // 清理旧文件
    await uploadFiles(); // 上传新文件
    spinner.succeed('发布成功！');
  } catch (error) {
    spinner.fail('发布失败！');
    console.error(chalk.red('错误信息:', error.message));
  }
};



deploy();

2.package.json中打包后执行该文件

  "scripts": {
    "dev": "vite --open",
    "build": "vite build",
    "deploy": "vite build && node ./deploy", // 打包并上传到服务器
    "serve": "vite preview"
  },

3、执行命令便会自动上传dist文件到服务器