如何将Vue3+Vite项目构建后的dist通过SFTP自动上传至远程服务器

我有一个简单的Vue3前端项目，希望在执行npm run build完成构建后，自动将编译生成的dist目录上传至远程服务器。以下是SFTP相关代码：

import Client from 'ssh2-sftp-client';
const sftp = new Client();

sftp.connect({
  host: 'my-server.com',
  port: 22,
  username: 'deploy-user',
  privateKey: require('fs').readFileSync(require('os').homedir() + '/.ssh/id_rsa')
})
.then(() => sftp.uploadDir('dist', '/var/www/html'))
.finally(() => {
  sftp.end();
  callback();
});

请问如何将这段代码与Vite集成以实现自动上传？

提供两种集成方式，可根据需求选择：

方法一：通过npm脚本链式执行 #

这种方式简单直接，利用npm脚本的顺序执行特性，在构建完成后触发上传逻辑。

1. 安装依赖
   在项目根目录执行命令，安装SFTP客户端：

npm install ssh2-sftp-client --save-dev

2. 编写独立上传脚本
   在项目根目录创建deploy.js文件，完善原代码的错误处理与输出逻辑：

const Client = require('ssh2-sftp-client');
const fs = require('fs');
const os = require('os');

const sftp = new Client();

sftp.connect({
  host: 'my-server.com',
  port: 22,
  username: 'deploy-user',
  privateKey: fs.readFileSync(os.homedir() + '/.ssh/id_rsa')
})
.then(() => {
  console.log('已连接远程服务器，开始上传dist目录...');
  return sftp.uploadDir('dist', '/var/www/html');
})
.then(() => console.log('dist目录上传完成！'))
.catch(err => {
  console.error('上传失败：', err.message);
  process.exit(1); // 上传失败时抛出错误码，中断流程
})
.finally(() => sftp.end());

3. 修改package.json脚本
   将build命令改为构建后自动执行上传脚本：

{
  "scripts": {
    "build": "vite build && node deploy.js"
  }
}

执行npm run build时，会先完成Vite构建，再自动触发上传。

方法二：通过Vite构建钩子集成 #

这种方式将上传逻辑嵌入Vite的构建生命周期，更贴合Vite的工作流。

1. 安装依赖
   同样先安装SFTP客户端：

npm install ssh2-sftp-client --save-dev

2. 修改vite.config.js配置
   在Vite配置文件中添加build.onEnd钩子，构建完成后自动执行上传：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
const Client = require('ssh2-sftp-client');
const fs = require('fs');
const os = require('os');

// 封装上传函数
async function uploadDist() {
  const sftp = new Client();
  try {
    await sftp.connect({
      host: 'my-server.com',
      port: 22,
      username: 'deploy-user',
      privateKey: fs.readFileSync(os.homedir() + '/.ssh/id_rsa')
    });
    console.log('已连接远程服务器，开始上传dist目录...');
    await sftp.uploadDir('dist', '/var/www/html');
    console.log('dist目录上传完成！');
  } catch (err) {
    console.error('上传失败：', err.message);
    throw err; // 抛出错误让Vite感知构建失败
  } finally {
    sftp.end();
  }
}

export default defineConfig({
  plugins: [vue()],
  build: {
    async onEnd() {
      await uploadDist();
    }
  }
});

此后执行npm run build，Vite完成构建后会自动触发上传流程。

• 确保本地~/.ssh/id_rsa私钥拥有远程服务器的访问权限，且目标目录/var/www/html具备写入权限。
• 可将服务器配置（host、username等）抽离为单独的配置文件（如deploy.config.js），避免硬编码，提升灵活性。
• Windows系统用户需注意私钥路径的写法，或改为相对路径存放私钥文件。

内容的提问来源于stack exchange，提问作者user824624