🌐 VSCode Vite Cloud Uploader Extension

一个为 vite-upload-assets-oss 插件提供可视化配置和管理界面的VSCode扩展。

✨ 功能特性

🎛️ 可视化配置界面

图形化配置 - 通过表单界面轻松配置云存储参数
多云支持 - 支持阿里云OSS、腾讯云COS、AWS S3、华为云OBS
实时预览 - 即时生成配置代码预览
配置验证 - 自动验证配置的完整性和正确性

🔌 连接测试功能

一键测试 - 快速验证云存储连接是否正常
批量测试 - 同时测试多个云存储提供商
详细反馈 - 显示响应时间和错误详情
连接状态 - 实时显示连接状态指示器

📊 上传进度监控

实时进度 - 显示文件上传的实时进度
状态跟踪 - 跟踪每个云存储提供商的上传状态
统计信息 - 显示上传文件数量、大小和耗时
错误处理 - 详细显示上传过程中的错误信息

📝 日志管理

详细日志 - 记录所有上传操作的详细日志
级别分类 - 支持info、warn、error、success四个级别
时间排序 - 按时间顺序显示最新的操作记录
日志导出 - 支持导出日志用于问题排查

🚀 快速开始

安装要求

VSCode 1.84.0 或更高版本
Node.js 16.0 或更高版本
已安装 vite-upload-assets-oss 插件的项目

安装扩展

在VSCode扩展市场搜索 "Vite Cloud Uploader"
点击安装
重启VSCode（如果需要）

基本使用

打开配置面板
- 按 Ctrl+Shift+P 打开命令面板
- 输入 "Vite Cloud Uploader: 打开配置面板"
- 或点击侧边栏的云上传图标
配置云存储
- 选择云存储提供商
- 填写认证信息和存储桶配置
- 设置文件类型和上传参数
测试连接
- 点击 "测试连接" 按钮
- 查看连接状态和响应时间
- 确认配置正确性
保存配置
- 点击 "保存配置" 按钮
- 自动更新项目中的 vite.config.ts 文件
- 查看生成的配置代码

🎛️ 界面说明

左侧面板

扩展在VSCode左侧活动栏添加了一个云上传图标，点击后显示三个面板：

📋 配置管理面板

提供商选择 - 选择要使用的云存储服务
认证配置 - 配置Access Key、Secret等认证信息
存储配置 - 设置存储桶、区域、CDN域名等
上传参数 - 配置文件类型、路径模板、并发数等
操作按钮 - 测试连接、保存配置、生成代码预览

📊 上传状态面板

状态概览 - 显示所有提供商的上传状态概况
详细进度 - 实时显示上传进度和文件统计
历史记录 - 查看最近的上传操作记录
错误信息 - 显示上传过程中的错误详情

📝 日志记录面板

操作日志 - 按时间顺序显示所有操作记录
级别筛选 - 支持按日志级别筛选显示
详情查看 - 点击日志条目查看详细信息
日志清理 - 支持清空历史日志记录

⚙️ 配置选项

扩展设置

在VSCode设置中搜索 "Vite Cloud Uploader" 可以找到以下配置项：

Auto Detect Config - 自动检测项目中的Vite配置文件
Show Upload Progress - 显示文件上传进度通知
Enable Notifications - 启用上传完成通知

云存储配置

阿里云OSS

{
  provider: 'oss',
  oss: {
    accessKeyId: 'your-access-key-id',
    accessKeySecret: 'your-access-key-secret',
    bucket: 'your-bucket-name',
    region: 'oss-cn-hangzhou'
  },
  publicPath: 'https://your-cdn-domain.com/',
  include: ['png', 'jpg', 'jpeg', 'gif', 'svg']
}

腾讯云COS

{
  provider: 'cos',
  cos: {
    secretId: 'your-secret-id',
    secretKey: 'your-secret-key',
    bucket: 'your-bucket-name',
    region: 'ap-beijing'
  },
  publicPath: 'https://your-cos-domain.com/',
  include: ['png', 'jpg', 'jpeg', 'gif', 'svg']
}

AWS S3

{
  provider: 's3',
  s3: {
    accessKeyId: 'your-access-key-id',
    secretAccessKey: 'your-secret-access-key',
    bucket: 'your-bucket-name',
    region: 'us-west-2'
  },
  publicPath: 'https://your-s3-domain.com/',
  include: ['png', 'jpg', 'jpeg', 'gif', 'svg']
}

华为云OBS

{
  provider: 'obs',
  obs: {
    accessKeyId: 'your-access-key-id',
    secretAccessKey: 'your-secret-access-key',
    bucket: 'your-bucket-name',
    endpoint: 'obs.cn-north-4.myhuaweicloud.com'
  },
  publicPath: 'https://your-obs-domain.com/',
  include: ['png', 'jpg', 'jpeg', 'gif', 'svg']
}

🔧 命令列表

扩展提供以下命令，可通过命令面板 (Ctrl+Shift+P) 访问：

Vite Cloud Uploader: 打开配置面板 - 打开可视化配置界面
Vite Cloud Uploader: 测试云存储连接 - 测试当前配置的连接
Vite Cloud Uploader: 清理上传缓存 - 清理本地上传缓存文件
Vite Cloud Uploader: 查看上传日志 - 打开日志记录面板

🔍 右键菜单

在项目的 vite.config.ts 文件上右键，可以看到以下选项：

打开配置面板 - 快速打开配置界面进行修改

📱 状态栏

扩展在状态栏显示以下信息：

连接状态 - 显示当前云存储连接状态
上传进度 - 进行上传时显示实时进度

🛠️ 故障排除

常见问题

1. 扩展无法激活

确保VSCode版本不低于1.84.0
检查是否有其他冲突的扩展
重启VSCode并重新加载项目

2. 配置无法保存

确保有项目工作区打开
检查 vite.config.ts 文件权限
确认项目根目录可写

3. 连接测试失败

检查网络连接是否正常
验证云存储认证信息是否正确
确认存储桶名称和区域设置
查看具体错误信息进行排查

4. 找不到云存储SDK

# 根据使用的云存储安装对应SDK
npm install ali-oss          # 阿里云OSS
npm install cos-nodejs-sdk-v5 # 腾讯云COS  
npm install aws-sdk           # AWS S3
npm install esdk-obs-nodejs   # 华为云OBS

调试信息

启用VSCode开发者工具查看详细的调试信息：

按 Ctrl+Shift+P 打开命令面板
输入 "Developer: Toggle Developer Tools"
在Console标签中查看扩展日志

🤝 贡献

欢迎提交Issue和Pull Request！

Fork本项目
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

🔗 相关项目

vite-upload-assets-oss - 核心Vite插件

如果这个扩展对你有帮助，请给项目一个⭐！

Vite Cloud Uploader

zhangnuli