告别手动上传：我写了一个 Vite 插件，一键将项目部署到腾讯云 COS 和阿里云 OSS

告别手动上传：我写了一个 Vite 插件，一键将项目部署到腾讯云 COS 和阿里云 OSS

摘要： 每次 npm run build 之后，你是不是还在手动打开云存储控制台，一步步点击上传打包好的 dist 文件夹？这个过程不仅繁琐、耗时，还容易出错。为了彻底解决这个痛点，我开发了一款名为 vite-plugin-cloud-upload 的 Vite 插件，它能将前端部署流程完全自动化，让你专注于代码，告别重复劳动。

标签： Vite 前端 自动化部署 腾讯云COS 阿里云OSS Node.js 插件开发

---

前言：为什么需要这个插件？

在现代前端开发中，Vite 凭借其极速的开发体验和高效的构建能力，已成为我们的首选工具。然而，开发流程的最后一步——部署，往往还是一个半自动甚至纯手动的环节。

我们通常的部署流程是：

1. 在本地执行 npm run build 命令，生成 dist 静态文件目录。
2. 登录腾讯云或阿里云的控制台。
3. 找到对应的存储桶（Bucket）。
4. 手动将 dist 目录下的所有文件上传上去，并设置正确的 CDN 刷新。

这个流程不仅枯燥，而且在频繁发布的迭代中，极大地浪费了开发者的宝贵时间。如果能让这一切在 build 命令结束后自动完成，那该多好？

正是基于这个想法，vite-plugin-cloud-upload 诞生了。它是一个专注于 “连接构建与部署” 的桥梁，让你的项目在打包完成后，无缝、自动地上传到云端。

✨ 插件核心功能一览

在设计之初，我希望它不仅仅是一个简单的上传工具，更能满足实际开发中的各种复杂需求。因此，它具备了以下核心特性：

• 🚀 自动触发：深度集成 Vite 构建生命周期，在 build 结束后自动执行上传任务。
• ☁️ 多厂商支持：内置了对国内最主流的腾讯云 COS 和阿里云 OSS 的支持。
• ⚡ 高性能并发：采用并发模式上传文件，文件再多也能瞬间完成，最大化利用网络带宽。
• 🧹 智能清理：支持在上传前自动清空远程目录的旧文件，确保每次部署都是一个全新的、干净的状态。
• 🎯 精准过滤：可以通过正则表达式灵活地筛选需要上传的文件，例如只上传 JS 和 CSS，或者排除 .map 文件。
• 📞 丰富的生命周期钩子：提供 onProgress、onUploaded 等钩子，允许你自定义上传过程中的各种行为，比如实现一个酷炫的控制台进度条。

📦 如何安装？

插件已经发布到 npm，你可以使用你喜欢的包管理器进行安装：

npm

npm install vite-plugin-cloud-upload --save-dev

yarn

yarn add vite-plugin-cloud-upload --dev

pnpm

pnpm add -D vite-plugin-cloud-upload

🚀 快速上手：三分钟配置指南

集成过程非常简单，只需在你的 vite.config.ts 文件中进行配置即可。

第 1 步：导入插件

// vite.config.ts
import { defineConfig } from 'vite';
import cloudUpload from 'vite-plugin-cloud-upload';

第 2 步：安全地配置凭证

切记！不要将你的 SecretId、SecretKey 等敏感信息硬编码在代码中！ 最佳实践是使用环境变量。在你的项目根目录创建一个 .env 文件：

# .env

# 腾讯云 COS 配置
COS_SECRET_ID=你的SecretId
COS_SECRET_KEY=你的SecretKey

# 阿里云 OSS 配置
OSS_ACCESS_KEY_ID=你的AccessKeyId
OSS_ACCESS_KEY_SECRET=你的AccessKeySecret

请确保将 .env 文件添加到 .gitignore 中，防止泄露。

第 3 步：配置插件

下面是两个完整的配置示例，你可以根据自己的云服务商选择一个。

示例一：上传到腾讯云 COS

// vite.config.ts
export default defineConfig({
  plugins: [
    // ...你的其他插件
    cloudUpload({
      // 提供商
      provider: 'tencent',
      // 凭证和存储桶信息
      providerConfig: {
        secretId: process.env.COS_SECRET_ID,
        secretKey: process.env.COS_SECRET_KEY,
        bucket: 'my-bucket-1250000000', // 你的存储桶名称
        region: 'ap-guangzhou',         // 你的存储桶所在地域
      },
      // 上传到存储桶的哪个子目录
      keyPrefix: 'my-project/latest',
      // 上传前清空这个目录
      cleanRemote: true,
    }),
  ],
});

示例二：上传到阿里云 OSS

// vite.config.ts
export default defineConfig({
  plugins: [
    cloudUpload({
      provider: 'aliyun',
      providerConfig: {
        accessKeyId: process.env.OSS_ACCESS_KEY_ID,
        accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
        bucket: 'my-aliyun-bucket',
        region: 'oss-cn-hangzhou',
      },
      // 只上传 JS 和 CSS 文件
      include: /\.(js|css)$/,
      // 上传成功后，删除本地的 dist 文件
      deleteLocalAfterUpload: true,
    }),
  ],
});```

配置完成后，再次运行 `npm run build`，你会发现，在打包信息输出完毕后，控制台会立刻开始打印上传日志。整个过程行云流水，无需任何人工干预！

### ⚙️ 进阶：所有配置选项详解

为了满足更复杂的场景，插件提供了丰富的配置项。

| 选项 | 类型 | 描述 |
|---|---|---|
| `provider` | `'tencent' \| 'aliyun'` | **必需项**。指定云服务提供商。|
| `providerConfig` | `object` | **必需项**。包含凭证、存储桶、地域等信息的配置对象。|
| `outDir` | `string` | 本地构建输出目录，默认为 `dist`。|
| `keyPrefix` | `string` | 上传到云端的路径前缀（子目录），默认为根目录。|
| `cleanRemote` | `boolean` | 上传前是否清空 `keyPrefix` 目录，默认为 `false`。|
| `include` | `RegExp` | 一个正则表达式，只上传匹配成功的文件。|
| `deleteLocalAfterUpload` | `boolean` | 上传成功后是否删除本地对应的文件，默认为 `false`。|
| `concurrency` | `number` | 并发上传数，默认为 `6`。|
| `retry`| `number`| 单文件上传失败后的重试次数，默认为 `2`。|
| `onProgress` | `Function` | 进度回调钩子，` (total, finished) => void`。|
| `onUploaded` | `Function` | 单文件上传成功后的回调，`(task) => void`。|
| `onFailed`| `Function`| 单文件上传失败后的回调，`(task, error) => void`。|

### 📞 玩法升级：用生命周期钩子打造酷炫进度条

你可以利用 `onProgress` 钩子，轻松实现一个控制台动态进度条，让上传过程更加直观。

```typescript
// vite.config.ts
import cloudUpload from 'vite-plugin-cloud-upload';

export default {
  plugins: [
    cloudUpload({
      provider: 'tencent',
      providerConfig: { /* ...你的配置... */ },
      onProgress: (total, finished) => {
        const percentage = Math.round((finished / total) * 100);
        // \r 让光标回到行首，实现单行刷新效果
        process.stdout.write(`上传中: ${finished}/${total} (${percentage}%) \r`);
      },
      onUploaded: (task) => {
        // 使用 console.log 换行，避免日志覆盖进度条
        console.log(`\n✔ 上传成功: ${task.key}`);
      },
    }),
  ],
};

总结

vite-plugin-cloud-upload 是一个轻量、强大且易于配置的工具。它能够将繁琐的部署上传工作完全自动化，将开发者从重复性劳动中解放出来，从而更专注于业务逻辑的实现。

如果你也厌倦了手动上传，希望提升自己的开发和部署效率，那么这款插件绝对值得一试！

项目地址

• NPM 地址: https://www.npmjs.com/package/vite-plugin-cloud-upload
• GitHub 仓库: https://github.com/yangcheng0111/vite-plugin-cloud-upload.git

希望这个插件能为你节省时间，带来便利。如果你觉得它还不错，欢迎大家试用、提 Issue 或者到 GitHub 点个 Star！你的支持是我持续维护和更新的最大动力！