Electron 应用升级方案与 electron-vite 配置指南

import { autoUpdater } from 'electron-updater'
import log from 'electron-log'

// 配置日志
autoUpdater.logger = log
autoUpdater.autoDownload = false
autoUpdater.autoInstallOnAppQuit = true

export function initUpdater() {
  // 检查更新
  autoUpdater.checkForUpdates()

  autoUpdater.on('checking-for-update', () => {
    log.info('正在检查更新...')
  })

  autoUpdater.on('update-available', (info) => {
    log.info(`发现新版本: ${info.version}`)
    // 可以在这里提示用户是否下载
    autoUpdater.downloadUpdate()
  })

  autoUpdater.on('update-not-available', () => {
    log.info('当前已是最新版本')
  })

  autoUpdater.on('download-progress', (progress) => {
    log.info(`下载进度: ${progress.percent.toFixed(1)}%`)
  })

  autoUpdater.on('update-downloaded', () => {
    log.info('更新已下载，准备安装')
    // 提示用户重启安装
  })

  autoUpdater.on('error', (error) => {
    log.error('更新错误:', error)
  })
}

publish:
  - provider: github
    owner: your-username
    repo: your-app
    releaseType: release

import { NsisUpdater, MacUpdater, AppImageUpdater } from 'electron-updater'
import { app } from 'electron'
import log from 'electron-log'

interface UpdaterOptions {
  provider: 'generic' | 'github' | 's3'
  url?: string
  owner?: string
  repo?: string
  token?: string
}

export class AppUpdater {
  private autoUpdater: NsisUpdater | MacUpdater | AppImageUpdater

  constructor(options: UpdaterOptions) {
    const updaterOptions = this.buildOptions(options)

    // 根据平台创建更新器
    if (process.platform === 'win32') {
      this.autoUpdater = new NsisUpdater(updaterOptions)
    } else if (process.platform === 'darwin') {
      this.autoUpdater = new MacUpdater(updaterOptions)
    } else {
      this.autoUpdater = new AppImageUpdater(updaterOptions)
    }

    this.autoUpdater.logger = log
    this.autoUpdater.autoDownload = false
    this.autoUpdater.autoInstallOnAppQuit = true

    // 私有仓库需要认证
    if (options.token) {
      this.autoUpdater.addAuthHeader(`Bearer ${options.token}`)
    }

    this.setupEvents()
  }

  private buildOptions(options: UpdaterOptions) {
    switch (options.provider) {
      case 'generic':
        return {
          provider: 'generic' as const,
          url: options.url!,
          useMultipleRangeRequest: true
        }
      case 'github':
        return {
          provider: 'github' as const,
          owner: options.owner!,
          repo: options.repo!,
          private: !!options.token
        }
      case 's3':
        return {
          provider: 's3' as const,
          bucket: options.url!,
          region: 'us-east-1'
        }
      default:
        throw new Error(`未知的 provider: ${options.provider}`)
    }
  }

  private setupEvents() {
    this.autoUpdater.on('checking-for-update', () => {
      log.info('检查更新中...')
    })

    this.autoUpdater.on('update-available', (info) => {
      log.info(`发现新版本: ${info.version}`)
    })

    this.autoUpdater.on('download-progress', (progress) => {
      log.info(`下载进度: ${progress.percent.toFixed(1)}%`)
    })

    this.autoUpdater.on('update-downloaded', () => {
      log.info('更新已下载')
    })

    this.autoUpdater.on('error', (error) => {
      log.error('更新错误:', error)
    })
  }

  async checkForUpdates() {
    return this.autoUpdater.checkForUpdates()
  }

  async downloadUpdate() {
    return this.autoUpdater.downloadUpdate()
  }

  quitAndInstall() {
    this.autoUpdater.quitAndInstall(false, true)
  }
}

import { updateElectronApp } from 'update-electron-app'

updateElectronApp()

const DeltaBuilder = require('@electron-delta/builder')

const options = {
  productIconPath: './build/icon.ico',
  productName: 'YourApp',

  getPreviousReleases: async () => {
    // 返回之前版本的信息，用于生成 delta
    return [
      {
        version: '1.0.0',
        url: 'https://your-server.com/releases/app-1.0.0.exe'
      }
    ]
  },

  sign: async (filePath) => {
    // 可选：签名 delta 文件
  }
}

exports.default = async function(context) {
  const deltaBuilder = new DeltaBuilder(options)
  await deltaBuilder.build({
    context,
    onProgress: (progress) => console.log(`Delta progress: ${progress}%`)
  })
}

import { DeltaUpdater } from '@electron-delta/updater'
import { app } from 'electron'

const deltaUpdater = new DeltaUpdater({
  logger: console,
  autoDownload: false,
  autoInstallOnAppQuit: true
})

export async function checkForUpdates() {
  try {
    const result = await deltaUpdater.checkForUpdates()
    if (result?.updateInfo) {
      console.log(`发现新版本: ${result.updateInfo.version}`)
      // Delta 更新会自动优先使用
      await deltaUpdater.downloadUpdate()
    }
  } catch (error) {
    console.error('更新检查失败:', error)
  }
}

deltaUpdater.on('update-downloaded', () => {
  // 提示用户重启安装
})

publish:
  - provider: generic
    url: https://your-bucket.s3.amazonaws.com/releases
    channel: latest

version: '3'
services:
  app:
    image: eoskin/electron-release-server
    ports:
      - "8080:80"
    environment:
      - APP_USERNAME=admin
      - APP_PASSWORD=your-secure-password
      - DB_HOST=db
      - DB_PORT=5432
      - DB_USERNAME=postgres
      - DB_PASSWORD=postgres
      - DB_NAME=electron_release_server
      - TOKEN_SECRET=your-64-char-random-string
      - DATA_ENCRYPTION_KEY=your-32-byte-base64-key
    depends_on:
      - db
    volumes:
      - ./assets:/app/assets

  db:
    image: postgres:14
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
      - POSTGRES_DB=electron_release_server
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

import express from 'express'
import path from 'path'
import fs from 'fs'

const app = express()
const RELEASES_DIR = './releases'

// 获取最新版本信息
function getLatestRelease(platform: string) {
  const ymlFile = platform === 'darwin' ? 'latest-mac.yml' : 'latest.yml'
  const ymlPath = path.join(RELEASES_DIR, platform, ymlFile)

  if (fs.existsSync(ymlPath)) {
    const content = fs.readFileSync(ymlPath, 'utf-8')
    // 解析 YAML 返回版本信息
    return parseYaml(content)
  }
  return null
}

// Squirrel.Mac 更新检查端点
app.get('/update/darwin/:version', (req, res) => {
  const currentVersion = req.params.version
  const latest = getLatestRelease('darwin')

  if (!latest || latest.version === currentVersion) {
    return res.status(204).end()
  }

  res.json({
    url: `https://your-server.com/releases/darwin/${latest.path}`,
    name: `v${latest.version}`,
    notes: latest.releaseNotes || '',
    pub_date: latest.releaseDate
  })
})

// Squirrel.Windows RELEASES 端点
app.get('/update/win32/:version/RELEASES', (req, res) => {
  const releasesPath = path.join(RELEASES_DIR, 'win32', 'RELEASES')

  if (fs.existsSync(releasesPath)) {
    res.type('text/plain').sendFile(releasesPath)
  } else {
    res.status(404).end()
  }
})

// 静态文件服务
app.use('/releases', express.static(RELEASES_DIR))

app.listen(3000, () => {
  console.log('Update server running on port 3000')
})

win:
  azureSignOptions:
    endpoint: https://eus.codesigning.azure.net
    codeSigningAccountName: your-account-name
    certificateProfileName: your-profile-name

win:
  certificateFile: path/to/certificate.pfx
  certificatePassword: ${env.WIN_CSC_KEY_PASSWORD}
  # 或使用证书主题名称 (适用于 HSM)
  certificateSubjectName: "Your Company Name"

mac:
  category: public.app-category.developer-tools
  target:
    - dmg
    - zip
  hardenedRuntime: true
  gatekeeperAssess: false
  entitlements: build/entitlements.mac.plist
  entitlementsInherit: build/entitlements.mac.plist
  notarize:
    teamId: ${env.APPLE_TEAM_ID}

# DMG 配置
dmg:
  sign: false  # DMG 本身不需要签名，内部 .app 已签名
  contents:
    - x: 130
      y: 220
    - x: 410
      y: 220
      type: link
      path: /Applications

name: Release

on:
  push:
    tags:
      - 'v*'

jobs:
  build:
    strategy:
      matrix:
        os: [macos-latest, windows-latest, ubuntu-latest]

    runs-on: ${{ matrix.os }}

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      # macOS 签名设置
      - name: Setup macOS signing
        if: matrix.os == 'macos-latest'
        env:
          MACOS_CERTIFICATE: ${{ secrets.MACOS_CERTIFICATE }}
          MACOS_CERTIFICATE_PWD: ${{ secrets.MACOS_CERTIFICATE_PWD }}
          KEYCHAIN_PASSWORD: ${{ secrets.KEYCHAIN_PASSWORD }}
        run: |
          echo $MACOS_CERTIFICATE | base64 --decode > certificate.p12
          security create-keychain -p "$KEYCHAIN_PASSWORD" build.keychain
          security default-keychain -s build.keychain
          security unlock-keychain -p "$KEYCHAIN_PASSWORD" build.keychain
          security import certificate.p12 -k build.keychain -P "$MACOS_CERTIFICATE_PWD" -T /usr/bin/codesign
          security set-key-partition-list -S apple-tool:,apple:,codesign: -s -k "$KEYCHAIN_PASSWORD" build.keychain

      # Windows Azure Trusted Signing 设置
      - name: Setup Windows signing
        if: matrix.os == 'windows-latest'
        run: |
          dotnet tool install --global AzureSignTool

      - name: Build and Release
        env:
          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          # macOS
          APPLE_ID: ${{ secrets.APPLE_ID }}
          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
          CSC_LINK: ${{ secrets.MACOS_CERTIFICATE }}
          CSC_KEY_PASSWORD: ${{ secrets.MACOS_CERTIFICATE_PWD }}
          # Windows Azure Trusted Signing
          AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
          AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
          AZURE_CLIENT_SECRET: ${{ secrets.AZURE_CLIENT_SECRET }}
        run: npm run release

import { defineConfig } from 'electron-vite'

export default defineConfig({
  main: {
    // 主进程 Vite 配置
  },
  preload: {
    // 预加载脚本 Vite 配置
  },
  renderer: {
    // 渲染进程 Vite 配置
  }
})

import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import { resolve } from 'path'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()],
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, 'src/main/index.ts')
        }
      },
      outDir: 'dist/main'
    }
  },
  preload: {
    plugins: [externalizeDepsPlugin()],
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, 'src/preload/index.ts')
        }
      },
      outDir: 'dist/preload'
    }
  },
  renderer: {
    root: 'src/renderer',
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src'),
        '@': resolve('src/renderer/src')
      }
    },
    plugins: [react(), tailwindcss()],
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, 'src/renderer/index.html')
        }
      },
      outDir: 'dist/renderer'
    }
  }
})

import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import { resolve } from 'path'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()],
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, 'src/main/index.ts')
        }
      }
    }
  },
  preload: {
    plugins: [externalizeDepsPlugin()],
    build: {
      rollupOptions: {
        input: {
          browser: resolve(__dirname, 'src/preload/browser.ts'),
          webview: resolve(__dirname, 'src/preload/webview.ts')
        }
      }
    }
  },
  renderer: {
    build: {
      rollupOptions: {
        input: {
          browser: resolve(__dirname, 'src/renderer/browser.html'),
          settings: resolve(__dirname, 'src/renderer/settings.html')
        }
      }
    }
  }
})

import { app, BrowserWindow } from 'electron'
import path from 'path'

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, '../preload/browser.js'),
      sandbox: false
    }
  })

  // 开发环境使用 HMR
  if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
  } else {
    mainWindow.loadFile(path.join(__dirname, '../renderer/browser.html'))
  }
}

app.whenReady().then(createWindow)

export default defineConfig({
  renderer: {
    base: './',  // 使用相对路径
    build: {
      // ...
    }
  }
})

{
  "scripts": {
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postbuild": "electron-builder"
  },
  "build": {
    "directories": {
      "output": "release"
    },
    "files": [
      "dist/**/*"
    ],
    "mac": {
      "target": ["dmg", "zip"]
    },
    "win": {
      "target": ["nsis"]
    },
    "linux": {
      "target": ["AppImage", "deb"]
    },
    "publish": {
      "provider": "github"
    }
  }
}