首先要准备应用图标
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',
}
