首先要准备应用图标
window需要：ico
mac需要：icns
linux需要png
借助：electron-icon-builder
安装：
npm i electron-icon-builder -D
配置package.json scripts
"build-icon": "electron-icon-builder --input=./electron/assets/icon.png --output=./electron/build --flatten"
说明：
input：icon.png是我需要引入的图标
output：是我将input引入图标所转换不同大小不同格式的图标输出文件
配置打包：electron-forge
因为我是已有的项目了，所以这里我只需要安装并引入electron-forge，虽然我进行配置了项目，但是我为了图省事用了electron框架，所以我必须用electron-builder进行配置打包了，所以这里针对electron-forge的笔记可能会比较浅薄。
npm install --save-dev @electron-forge/cli
npm exec --package=@electron-forge/cli -c "electron-forge import"
因为配置时没考虑到maker，所以很容易忽略这段安装：
npm install --save-dev @electron-forge/cli @electron-forge/maker-squirrel @electron-forge/maker-deb @electron-forge/maker-zip
package.json示例：
devDependencies: {"@electron-forge/cli": "^7.4.0","@electron-forge/maker-deb": "^7.4.0","@electron-forge/maker-dmg": "^7.4.0","@electron-forge/maker-rpm": "^7.4.0","@electron-forge/maker-squirrel": "^7.4.0","@electron-forge/maker-zip": "^7.4.0","@electron-forge/plugin-auto-unpack-natives": "^7.4.0","@electron-forge/plugin-fuses": "^7.4.0",
}scripts: {"build:os": "electron-forge package","build:maker": "electron-forge make",
}config: {"forge": "./config.forge.js"}
config.forge.js配置
module.exports = {"packagerConfig": {version: '0.0.1',appVersion: '0.0.1',name: 'electron-umi',productName: 'viefong',icon: 'electron/build/icons',out: './release/',overwrite: true,asar: true,"copyright": "Copyright © 2024",// "ignore": [ // 不需要打包的文件和文件夹的路径列表// ".git",// ".vscode",// "node_modules/.cache",// "src"// ],descriptions: '微鳯即时通讯工具',// 配置其他构建器（特殊情况下使用）"win": { // Windows平台的配置"target": "nsis", // 打包的目标格式为NSIS安装程序"icon": "./electron/build/icons/icon.ico", // Windows平台的图标路径"publisherName": "electron-umi开发者团队", // 发布者名称"fileAssociations": [ // 关联文件类型的配置{"ext": "myext", // 文件扩展名"name": "electron-umi", // 文件类型名称"description": "electron-umi即时通讯工具", // 文件类型描述"role": "Editor" // 文件类型的角色}],"certificateFile": "path/to/certificate.pfx", // 数字证书文件的路径"certificatePassword": "password123" // 数字证书的密码},"mac": { // macOS平台的配置"target": "dmg", // 打包的目标格式为DMG镜像"icon": "./electron/build/icons/icon.icns", // macOS平台的图标路径"category": "public.app-category.utilities", // 应用程序的分类"extendInfo": { // 扩展应用程序包的配置"NSAppTransportSecurity": {"NSAllowsArbitraryLoads": true // 允许应用程序加载任意的网络资源}}},"linux": { // Linux平台的配置"target": "deb", // 打包的目标格式为DEB包"icon": "./electron/build/icons/icon.png", // Linux平台的图标路径"category": "Utility", // 应用程序的分类"description": "electron-umi即时通讯工具", // 应用程序的描述"desktop": { // 创建桌面快捷方式的配置"Name": "electron-umi", // 快捷方式的名称"Comment": "electron-umi", // 快捷方式的注释"Exec": "./viefong", // 快捷方式的执行命令"Terminal": false // 是否在终端中打开应用程序}}},"makers": [{"name": "@electron-forge/maker-squirrel","config": {"name": "electron_quick_start","setupIcon": "./electron/build/icons/icon.ico"}},{"name": '@electron-forge/maker-dmg',"config": {"format": 'ULFO',icon: './electron/build/icons/icon.icns'}},{"name": "@electron-forge/maker-deb","config": {options: {icon: './electron/build/icons/icon.icns'}}},{"name": "@electron-forge/maker-rpm","config": {}}],"hook": {}
}
配置打包：electron-builder
安装：
yarn add electron-builder --dev
配置，在package.json中直接复制进去即可：
"build": {"appId": "com.electron.app","files": ["dist","node_modules","package.json"],"nsis": {"artifactName": "electron-umi","oneClick": false,"perMachine": true,"allowElevation": true,"allowToChangeInstallationDirectory": true,"installerIcon": "./electron/build/icons/icon.ico","uninstallerIcon": "./electron/build/icons/icon.ico","installerHeaderIcon": "./electron/build/icons/icon.ico","installerSidebar": "./electron/build/icons/sidebar-164x314.bmp","createDesktopShortcut": true,"createStartMenuShortcut": true,"include": "./electron/build/installer.nsh"},"asar": true,"asarUnpack": "**\\*.{node,dll}","afterSign": "electron/.erb/scripts/notarize.js","mac": {"target": {"target": "default","arch": ["arm64","x64"]},"type": "distribution","hardenedRuntime": true,"entitlements": "electron/assets/entitlements.mac.plist","entitlementsInherit": "electron/assets/entitlements.mac.plist","gatekeeperAssess": false,"icon": "electron/build/icons/icon.icns"},"dmg": {"icon": "electron/build/icons/icon.icns","contents": [{"x": 130,"y": 220},{"x": 410,"y": 220,"type": "link","path": "/Applications"}]},// 自动更新"publish": {"provider": "github","owner": "electron-umi","repo": "electron-umi"},"directories": {"app": "release/app","buildResources": "assets","output": "release/build"}},
注：因为我项目中用的是umi脚手架搭建的react，打包后，是空白页面，所以要在.umirc.ts中配置一下即可
history: {type: 'hash',
}
