Electron 打包定制
本节介绍如何定制 Electron 应用的打包配置，包括安装程序背景图片、应用图标和应用名称。
定制安装程序背景图片
在 macOS 的 DMG 安装程序中，可以设置自定义背景图片。步骤如下：
- 将背景图片资源放入
build/resources/目录 - 在
electron-builder配置中设置dmg.background路径：
{
"build": {
"directories": {
"buildResources": "build/resources"
},
"dmg": {
"background": "dist/build/resources/background.tiff"
}
}
}
json
打包完成后，DMG 安装界面会显示自定义背景图片，替代默认的简洁图标拖拽界面。
设置应用名称和 ID
{
"build": {
"appId": "com.toimc.app-template",
"productName": "Vue3 模板项目"
}
}
json
- appId：使用域名反写格式（
com.域名.应用名），需用短横线连接 - productName：用户看到的应用显示名称
设置应用图标
各平台图标格式不同：
| 平台 | 图标格式 | 配置项 |
|---|---|---|
| macOS | .icns | mac.icon |
| Windows | .ico | win.icon |
| Linux | .png | linux.icon |
{
"build": {
"mac": {
"icon": "build/resources/icon.icns"
},
"win": {
"icon": "build/resources/icon.ico"
},
"linux": {
"icon": "build/resources/icon.png"
}
}
}
json
打包命令：
npm run build:electron-only
bash
打包产物在 releases/ 目录中，双击即可看到定制后的安装界面。
↑