Electron Vite Monorepo打包发布：electron-builder配置完全手册

Electron Vite Monorepo打包发布：electron-builder配置完全手册

【免费下载链接】vite-vue3-adminElectron Turborepo monorepo with pnpm, Vue, Vite boilerplate项目地址: https://gitcode.com/gh_mirrors/vi/vite-vue3-admin

Electron Vite Monorepo是一个基于pnpm、Vue和Vite的现代化Electron应用开发框架，通过Turborepo实现高效的多包管理。本指南将详细介绍如何使用electron-builder配置并打包发布你的Electron应用，从基础设置到高级优化，帮助你快速掌握完整的打包流程。

📦 核心依赖与项目结构

在开始配置前，确保项目中已安装electron-builder。查看apps/electron/package.json文件，确认开发依赖中包含：

"electron-builder": "26.8.1"

项目采用Monorepo结构，Electron主进程代码位于apps/electron/目录，打包配置主要集中在该目录下的scripts/build.mts文件中。

Vite作为构建工具，为Electron应用提供快速的开发体验和优化的生产构建

⚙️ 基础配置详解

入口文件与输出目录

在build.mts中，首先定义了应用的基础信息和目录结构：

const options: Configuration = { appId: isDev ? 'com.electron.app' : 'com.electron-dev.app', productName: appName, directories: { output: '../../out', // 打包输出路径 buildResources: 'buildResources' // 构建资源目录 }, files: [ // 需要打包的文件 'dist', 'resources' ] }

跨平台目标配置

electron-builder支持多平台打包，配置位于options对象的平台特定属性中：

Windows平台

win: { icon: 'icon.ico', target: [ { target: 'nsis', // 使用NSIS生成安装程序 arch: ['ia32', 'x64'] // 支持32位和64位系统 } ] }

macOS平台

mac: { target: [ { target: 'default', arch: ['x64', 'arm64'] // 支持Intel和Apple Silicon芯片 } ], icon: 'icon.icns', hardenedRuntime: true, // 启用 hardened runtime entitlements: 'buildResources/entitlements.mac.plist' }

Linux平台

linux: { target: ['AppImage', 'rpm', 'deb'] // 生成多种Linux包格式 }

🚀 打包命令与工作流

项目的打包命令定义在apps/electron/package.json的scripts中：

"scripts": { "build:dev": "vite build --mode development && pnpm bundle", "build:prod": "vite build && pnpm bundle", "pack:dev": "pnpm build:dev && dotenvx run -f .env.development -- pnpm pack:app", "pack:prod": "pnpm build:prod && dotenvx run -f .env.production -- pnpm pack:app" }

开发环境打包

pnpm --filter electron-main pack:dev

生产环境打包

pnpm --filter electron-main pack:prod

打包过程会先通过Vite构建应用代码，然后调用electron-builder进行打包，最终输出到out/目录。

🔄 应用更新配置

项目集成了自动更新功能，配置位于options.publish：

publish: [ { provider: 'github', // 使用GitHub发布更新 releaseType: 'draft', // 创建草稿发布 } ]

要启用自动更新，需要在主进程中集成electron-updater，相关代码位于apps/electron/src/modules/updater/目录。

📝 高级配置技巧

自定义安装程序行为

通过NSIS配置自定义Windows安装体验：

nsis: { oneClick: false, // 禁用一键安装 perMachine: true, // 按机器安装（需要管理员权限） allowToChangeInstallationDirectory: true, // 允许用户选择安装目录 createDesktopShortcut: true, // 创建桌面快捷方式 shortcutName: shortcutName // 快捷方式名称 }

资源文件处理

在打包前，脚本会自动复制Web应用和Preload脚本到构建目录：

cpSync(path.join(workDir, '../web/dist'), path.join(workDir, './dist/web'), copySyncOptions) cpSync(path.join(workDir, '../preload/dist'), path.join(workDir, './dist/preload'), copySyncOptions)

代码签名与公证

macOS应用需要签名和公证才能在App Store上架或正常运行：

mac: { hardenedRuntime: true, entitlements: 'buildResources/entitlements.mac.plist', notarize: false // 设置为true启用自动公证 }

完整的签名配置可参考buildResources/entitlements.mac.plist文件。

📚 总结与资源

通过本文介绍的配置，你可以实现Electron应用的跨平台打包、自动更新和签名发布。完整的配置代码位于：

• 打包脚本：apps/electron/scripts/build.mts
• 构建资源：apps/electron/buildResources/
• 依赖配置：apps/electron/package.json

要开始使用这个框架，只需克隆仓库并安装依赖：

git clone https://gitcode.com/gh_mirrors/vi/vite-vue3-admin cd vite-vue3-admin pnpm install

掌握这些配置技巧后，你可以根据项目需求定制更复杂的打包流程，为用户提供专业的应用分发体验。

【免费下载链接】vite-vue3-adminElectron Turborepo monorepo with pnpm, Vue, Vite boilerplate项目地址: https://gitcode.com/gh_mirrors/vi/vite-vue3-admin