Vue 项目自动化部署：使用 vite-plugin-sftp 实现构建后自动上传服务器

在前端开发流程中，频繁地手动通过 FTP 工具上传打包后的 dist 目录既费时又容易出错。为了提高效率，我们可以将“构建”与“部署”两个步骤合二为一。本文将介绍如何使用 vite-plugin-sftp 插件，在执行 npm run build 后自动将文件传输到远程服务器。

1. 安装插件

首先，在你的 Vue 项目根目录下安装 vite-plugin-sftp 开发依赖：

npm install vite-plugin-sftp --save-dev

2. 配置 Vite

在 vite.config.ts (或 vite.config.js) 中引入并配置该插件。你需要提供服务器的 IP 地址、SSH 端口、用户名、密码以及远程部署路径。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import sftp from 'vite-plugin-sftp';

export default defineConfig({
  plugins: [
    vue(),
    sftp({
      host: '你的服务器IP',
      port: 22,
      user: 'root',
      password: '你的密码',
      remotePath: '/var/www/html/my-project',
      // 可选：上传前是否删除远程目录下的旧文件
      // cleanRemotePath: true 
    })
  ]
});

3. 运行与验证

配置完成后，只需像往常一样运行构建命令：

npm run build

构建完成后，终端会显示文件上传的进度。一旦完成，你的代码就已经成功部署到服务器指定的 remotePath 路径下了。

4. 进阶建议：安全性优化

重要提示： 直接将密码写在 vite.config.ts 中存在安全风险，特别是当代码托管在公开仓库时。建议使用环境变量来管理敏感信息：

1. 在项目根目录创建 .env.local 文件：
   复制

   SFTP_PASSWORD=your_password
   

2. 在配置文件中读取：
   复制

   import { defineConfig, loadEnv } from 'vite';
   
   export default defineConfig(({ mode }) => {
     const env = loadEnv(mode, process.cwd(), '');
     return {
       plugins: [
         sftp({
           host: 'your-server-ip',
           user: 'root',
           password: env.SFTP_PASSWORD,
           remotePath: '/var/www/html/my-project',
         })
       ]
     };
   });
   

通过这种方式，你可以实现更加安全、高效的自动化流水线。