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

使用的是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()
      }
    })
相关推荐
前端工作日常1 天前
平台价值与用户规模的共生关系
electron·测试·puppeteer
阿夹克斯1 天前
告别Vite脚手架局限!MixOne Beta测试招募:你的需求,我们来实现
electron
深职第一突破口喜羊羊2 天前
记一次electron开发插件市场遇到的问题
javascript·electron
cypking2 天前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
cypking2 天前
解决electron+vue-router在history模式下打包后首页空白问题
javascript·vue.js·electron
Mr_兔子先生4 天前
2025盛夏版:基于electron37+vite7的React桌面客户端保姆教程
react.js·electron·vite
小圣贤君4 天前
在写作软件中画地图,Canvas 绘图在地图设计中应用
vue.js·electron·写作·canvas·绘图
屋昂仼4 天前
解决 Electron 中 window.open 打开新窗口的各种“坑”
前端·javascript·electron
牛马喜喜5 天前
记一次electron开发插件市场遇到的问题
前端·electron
敲可耐的咕魂君5 天前
【建议AI收录本信息】electron进行主进程和渲染进程异步通信
electron·vue