快捷導(dǎo)航

electron-builder打包與發(fā)布Electron應(yīng)用

更新時(shí)間：2025年05月28日 09:11:35 作者：黑匣子~

使用electron-builder基于electron-vite-vue實(shí)現(xiàn)多平臺(tái)打包、自動(dòng)更新配置及構(gòu)建流程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

?? 項(xiàng)目結(jié)構(gòu)

electron-vite-vue/
├── electron/                 # 主進(jìn)程代碼
├── src/                      # 渲染進(jìn)程代碼（Vue）
├── dist/                     # 渲染構(gòu)建輸出（vite 自動(dòng)生成）
├── dist-electron/           # 主進(jìn)程和安裝包構(gòu)建輸出
├── package.json              # 配置文件（包含 build 字段）

?? 安裝依賴

npm install -D electron-builder

electron-vite-vue 中已集成打包腳本（通常在 package.json 的 scripts 字段）：

"scripts": {
  "dev": "electron-vite dev",
  "build": "electron-vite build",
  "build:dir": "electron-builder build",
  "build:win": "electron-builder --win",
  "build:mac": "electron-builder --mac"
}

?? 基本構(gòu)建配置（package.json 中的 build 字段）

"build": {
  "appId": "com.example.app",
  "productName": "MyApp",
  "directories": {
    "output": "dist-electron"
  },
  "files": [
    "dist",
    "electron",
    "node_modules"
  ],
  "win": {
    "target": "nsis"
  },
  "mac": {
    "target": "dmg"
  },
  "publish": {
    "provider": "github",
    "owner": "yourname",
    "repo": "your-repo"
  }
}

?? 打包命令說明

命令	功能
npm run build	構(gòu)建渲染進(jìn)程 (Vite)
npm run build:dir	打包主進(jìn)程和產(chǎn)物
electron-builder --win	構(gòu)建 Windows 安裝包
electron-builder --mac	構(gòu)建 macOS DMG
electron-builder -p never	僅打包不發(fā)布
electron-builder -p always	打包并自動(dòng)發(fā)布

?? 打包輸出結(jié)構(gòu)

輸出目錄通常為 dist-electron/，包含：

Windows:
- MyApp Setup 1.0.0.exe
- latest.yml
- blockmap（如啟用增量更新）
macOS:
- MyApp-1.0.0.dmg
- latest-mac.yml

?? 自動(dòng)更新配置（publish）

GitHub 發(fā)布

"publish": {
  "provider": "github",
  "owner": "yourname",
  "repo": "your-repo"
}

使用 GH_TOKEN 環(huán)境變量授權(quán)發(fā)布
發(fā)布內(nèi)容包括 .exe/.dmg + .yml 文件

Generic 發(fā)布（靜態(tài)服務(wù)器）

"publish": {
  "provider": "generic",
  "url": "https://your-domain.com/updates/"
}

?? 需手動(dòng)上傳構(gòu)建產(chǎn)物

?? macOS 注意事項(xiàng)

簽名/公證對于自動(dòng)更新是必須的
推薦使用 Apple Developer ID + notarize 配合發(fā)布

?? 調(diào)試建議

添加日志模塊 electron-log
設(shè)置日志等級(jí) autoUpdater.logger = log
可通過 --config 傳入額外構(gòu)建配置

? 推薦實(shí)踐流程

設(shè)置 build 字段（含 publish）
執(zhí)行渲染構(gòu)建：npm run build
執(zhí)行打包構(gòu)建：npm run build:dir 或指定平臺(tái)構(gòu)建
上傳產(chǎn)物到 GitHub Release 或服務(wù)器
應(yīng)用中啟用 electron-updater 自動(dòng)更新邏輯

到此這篇關(guān)于electron-builder打包與發(fā)布Electron應(yīng)用的文章就介紹到這了,更多相關(guān)electron-builder打包與發(fā)布Electron內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: