Vite Electron Builder自动更新功能实战教程：从配置到部署

【免费下载链接】vite-electron-builder Secure boilerplate for Electron app based on Vite. TypeScript + Vue/React/Angular/Svelte/Vanilla 项目地址: https://gitcode.com/gh_mirrors/vi/vite-electron-builder

想要为你的Electron应用实现自动更新功能吗？Vite Electron Builder提供了开箱即用的自动更新解决方案，让用户能够无缝获取最新版本。本教程将带你从零开始，完整掌握自动更新功能的配置、开发和部署流程。

🚀 为什么需要自动更新功能？

传统的桌面应用更新需要用户手动下载安装包、关闭应用、重新安装，流程繁琐且容易出错。通过Vite Electron Builder的自动更新功能，你的应用可以：

• ✅ 自动检测新版本
• ✅ 静默下载更新包
• ✅ 用户重启时自动安装
• ✅ 支持多平台发布
• ✅ 提供更新进度提示

⚙️ 核心配置详解

自动更新模块配置

Vite Electron Builder在 packages/main/src/modules/AutoUpdater.ts 中提供了完整的自动更新实现：

// 核心自动更新类
export class AutoUpdater implements AppModule {
  async runAutoUpdater() {
    const updater = this.getAutoUpdater();
    updater.logger = this.#logger || null;
    updater.fullChangelog = true;
    
    // 支持分发渠道配置
    if (import.meta.env.VITE_DISTRIBUTION_CHANNEL) {
      updater.channel = import.meta.env.VITE_DISTRIBUTION_CHANNEL;
    }
    
    return await updater.checkForUpdatesAndNotify(this.#notification);
  }
}

Electron Builder配置

在 electron-builder.mjs 中配置自动更新相关设置：

export default {
  generateUpdatesFilesForAllChannels: true,
  // 使用标准化的构建产物名称
  artifactName: '${productName}-${version}-${os}-${arch}.${ext}',
}

关键配置说明：

• generateUpdatesFilesForAllChannels: 为所有渠道生成更新文件
• artifactName: 使用标准命名规则，避免特殊字符导致的更新问题

🔧 三步实现自动更新

第一步：依赖安装

项目已经内置了 electron-updater 依赖，在 packages/main/package.json 中可以看到：

{
  "dependencies": {
    "electron-updater": "6.7.3"
  }
}

第二步：模块初始化

在主进程入口文件 packages/main/src/index.ts 中启用自动更新：

export async function initApp(initConfig: AppInitConfig) {
  const moduleRunner = createModuleRunner()
    .init(autoUpdater()) // 启用自动更新
    // ... 其他模块
}

第三步：环境变量配置

通过环境变量控制更新行为：

# 设置分发渠道
VITE_DISTRIBUTION_CHANNEL=stable

📦 发布与部署流程

构建配置

确保在 electron-builder.mjs 中正确配置发布目标：

linux: {
  target: ['deb'],
}

自动化部署

项目提供了 .github/workflows/deploy.yml 工作流，实现一键发布：

- run: gh release create v${{inputs.app-version}} dist/root* dist/latest*.yml

🎯 最佳实践建议

1. 版本管理策略

• 使用语义化版本控制
• 为不同渠道设置版本策略
• 保持更新日志的完整性

2. 错误处理机制

自动更新模块内置了完善的错误处理：

try {
  return await updater.checkForUpdatesAndNotify(this.#notification);
} catch (error) {
  if (error.message.includes('No published versions')) {
    return null; // 处理未发布版本的情况
  }
}

3. 用户体验优化

• 提供清晰的更新进度提示
• 允许用户选择更新时机
• 确保更新过程的稳定性

🔍 常见问题排查

Q: 自动更新功能不工作怎么办？ A: 检查网络连接、发布渠道配置和版本号设置

Q: 如何测试自动更新？ A: 安装旧版本应用，发布新版本后验证更新流程

💡 进阶功能扩展

除了基础的自动更新，你还可以实现：

• 🔄 增量更新以减少下载量
• 📊 更新统计和数据分析
• 🎨 自定义更新界面
• 🔒 签名验证确保更新安全

🏁 总结

通过Vite Electron Builder，你可以轻松为Electron应用添加自动更新功能。从配置到部署，整个过程都经过精心设计，确保稳定可靠。记住，良好的自动更新体验能够显著提升用户满意度和产品留存率。

现在就开始为你的Electron应用配置自动更新功能吧！🚀

【免费下载链接】vite-electron-builder Secure boilerplate for Electron app based on Vite. TypeScript + Vue/React/Angular/Svelte/Vanilla 项目地址: https://gitcode.com/gh_mirrors/vi/vite-electron-builder