当前位置：首页 > news >正文

electron-builder打包配置（应用名、安装包、图标、快捷方式、自定义文件关联启动等）

news 来源：原创 2025/6/14 8:00:53

使用的是electron-vite + electron-builder

在electron-builder.yml中配置，主要使用的是windows，其他配置请自行验证

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: trueicon: 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.plistextendInfo:- 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- debmaintainer: electronjs.orgcategory: Utility
appImage:artifactName: ${productName}-${version}.${ext}
npmRebuild: false
publish:provider: genericurl: http://192.168.2.32:8904/

其中${productName}、${version}对应的是package.json中的参数

  "name": "app","productName": "xx软件","version": "2.0.2",

将png图标转化为ico

执行package.json中的脚本，使用electron-icon-maker，将resources/icon.png输出到build下

"build:icons": "electron-icon-maker --input=./resources/icon.png --output=./build",

系统托盘图标

需要使用png，ico无法展示

    // ---- 窗口收纳于托盘 ---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()}})