使用的是electron-vite + electron-builder
在electron-builder.yml
中配置,主要使用的是windows,其他配置请自行验证
yml
appId: cn.kingray.www
# 只能string 不能用${productName}
productName: xx软件
copyright: Copyright © Powered by xx公司
directories:
buildResources: build
# output: release
files:
- '!**/.vscode/*'
- '!src/*'
- '!electron.vite.config.{js,ts,mjs,cjs}'
- '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
- '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
- '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
asarUnpack:
- resources/**
- out/main/chunks/*.node
asar:
smartUnpack: true
# 设置自定义文件关联启动
fileAssociations:
description: kingrayFile
# 自定义文件后缀
ext: krzj
# 自定义文件图标
icon: build/icons/win/icon.ico
win:
# 只能string 不能用${productName}
executableName: xx软件
target: nsis
# 必须为true 并且需要管理员运行
signAndEditExecutable: true
icon: build/icons/win/icon.ico
nsis:
# 安装包名称
artifactName: ${productName}-${version}-setup.${ext}
# 快捷方式名称
shortcutName: ${productName}
# 卸载程序显示名称
uninstallDisplayName: ${productName}
# 是否创建桌面快捷方式
createDesktopShortcut: always
# 是否创建开始菜单快捷方式
createStartMenuShortcut: true
# 是否为单机版
oneClick: false
# 是否为机器级别安装
perMachine: true
# 是否允许更改安装目录
allowToChangeInstallationDirectory: true
# 是否在卸载时删除应用程序数据
deleteAppDataOnUninstall: false
# 安装程序图标
installerIcon: build/icons/win/icon.ico
# 卸载程序图标
uninstallerIcon: build/icons/win/icon.ico
# 安装程序头部图标
installerHeaderIcon: build/icons/win/icon.ico
# 安装程序侧边栏图标
installerSidebar: build/icons/win/icon.ico
# 许可证文件
# license: build/license.txt
mac:
entitlementsInherit: build/entitlements.mac.plist
extendInfo:
- NSCameraUsageDescription: Application requests access to the device's camera.
- NSMicrophoneUsageDescription: Application requests access to the device's microphone.
- NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
- NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
notarize: false
dmg:
artifactName: ${productName}-${version}.${ext}
linux:
target:
- AppImage
- snap
- deb
maintainer: electronjs.org
category: Utility
appImage:
artifactName: ${productName}-${version}.${ext}
npmRebuild: false
publish:
provider: generic
url: http://192.168.2.32:8904/
其中
${productName}、${version}
对应的是package.json
中的参数
json
"name": "app",
"productName": "xx软件",
"version": "2.0.2",
将png图标转化为ico
执行package.json
中的脚本,使用electron-icon-maker
,将resources/icon.png
输出到build
下
json
"build:icons": "electron-icon-maker --input=./resources/icon.png --output=./build",
目录

系统托盘图标
需要使用png,ico无法展示
ts
// ---- 窗口收纳于托盘 ---
const trayIconPath = join(__dirname, '../../resources/icon.png')
const trayIcon = nativeImage.createFromPath(trayIconPath)
const tray = new Tray(trayIcon)
// 设置托盘工具提示(鼠标悬停时的名称)
tray.setToolTip('xx软件')
// 创建上下文菜单
const contextMenu = Menu.buildFromTemplate([
{ label: '显示应用', click: () => mainWindow?.show() },
{ label: '退出', click: () => app.quit() }
])
tray.setContextMenu(contextMenu)
// (可选)点击托盘图标显示/隐藏窗口
tray.on('click', () => {
if (mainWindow?.isVisible()) {
mainWindow?.hide()
} else {
mainWindow?.show()
}
})