Electron打包

举报
Chris Cheng 发表于 2023/03/20 23:58:00 2023/03/20
【摘要】 electron-packager和electron-builder打包教程

本文首发于 CSDN https://blog.csdn.net/weixin_43130747/article/details/128060935

使用electron-packager

安装

// 全局安装
npm install -g electron-packager
// 项目安装
npm install electron-packager -D

打包

electron-packager ./ AppName --out=out  --version 1.0.0 --platform=win32 --arch=x64 --electron-version=v20.2.0 --ignore=.git --overwrite --icon=favicon.ico --asar
  • AppName:项目名称
  • out:输出目录
  • version:打包的版本
  • –platform=win32:windows平台
  • –arch=x64:x64架构
  • –electron-version:electron版本号,当有多个版本时,必须加上。
  • –ignore 忽略项,注意不能忽略不存在的文件夹,否则打包出来的可执行文件是白屏
  • –overwrite repack时复写
  • –icon=favicon.ico 图标
  • –asar source加密

配置package.json

为了方便可以在package.json配置electron-packager

"scripts": {
   "build": "electron-packager ./ AppName --out=out  --version 1.0.0 --platform=win32 --arch=x64 --electron-version=v20.2.0 --ignore=.git --overwrite --icon=favicon.ico --asar"
 }

这样只需要输入

npm run build

即可打包

PS:productName、author 和 description,这几个字段并不是打包必备的,但它们会在 Windows 的 Squirrel 安装包中使用到,所以尽量加上。

打包报错

在第一次打包时很容易出错,建议换源:

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

electron-builder

electron-packager正被electron-builder取代

安装

// 全局安装
npm install -g electron-builder
// 项目安装
npm install electron-builder -D

配置package.json

配置打包信息

  "build": {
    "productName": "electron-demo",   // 安装包文件名
    "copyright": "Copyright © 2022 Chris", //版权信息
    "directories": {
      "output": "dist"  // 安装包生成目录
    },
    "asar": false,
    "nsis": {
      "oneClick": false,  // 是否一键安装
      "allowToChangeInstallationDirectory": true    // 允许用户选择安装目录
    },
    "mac": {
      "category": "your.app.category.type"
    },
    "win": {
      "icon": "build/icons/food.png",   // 安装包图标,必须为 256 * 256 像素图片
      "target": [
        {
          "target": "nsis"
        }
      ]
    }
  }

详细的配置请参考electron-builder配置官方文档

配置打包命令

"scripts": {
    "start": "electron .",
    "build": "electron-builder"
  }

NSIS

常用配置:

nsis: {
	"oneClick": false, // 创建一键安装程序还是辅助安装程序(默认是一键安装)
    "allowElevation": true, // 是否允许请求提升,如果为false,则用户必须使用提升的权限重新启动安装程序 (仅作用于辅助安装程序)
    "allowToChangeInstallationDirectory": true, // 是否允许修改安装目录 (仅作用于辅助安装程序)
    "installerIcon": "public/timg.ico",// 安装程序图标的路径
    "uninstallerIcon": "public/timg.ico",// 卸载程序图标的路径
    "installerHeader": "public/timg.ico", // 安装时头部图片路径(仅作用于辅助安装程序)
    "installerHeaderIcon": "public/timg.ico", // 安装时标题图标(进度条上方)的路径(仅作用于一键安装程序)
    "installerSidebar": "public/installerSiddebar.bmp", // 安装完毕界面图片的路径,图片后缀.bmp,尺寸164*314 (仅作用于辅助安装程序)
    "uninstallerSidebar": "public/uninstallerSiddebar.bmp", // 开始卸载界面图片的路径,图片后缀.bmp,尺寸164*314 (仅作用于辅助安装程序)
    "uninstallDisplayName": "${productName}${version}", // 控制面板中的卸载程序显示名称
    "createDesktopShortcut": true, // 是否创建桌面快捷方式
    "createStartMenuShortcut": true,// 是否创建开始菜单快捷方式
    "shortcutName": "SHom", // 用于快捷方式的名称,默认为应用程序名称
    "include": "script/installer.nsi",  // NSIS包含定制安装程序脚本的路径,安装过程中自行调用  (可用于写入注册表 开机自启动等操作)
    "script": "script/installer.nsi",  // 用于自定义安装程序的NSIS脚本的路径
    "deleteAppDataOnUninstall": false, // 是否在卸载时删除应用程序数据(仅作用于一键安装程序)
    "runAfterFinish": true,  // 完成后是否运行已安装的应用程序(对于辅助安装程序,应删除相应的复选框)
    "menuCategory": false, // 是否为开始菜单快捷方式和程序文件目录创建子菜单,如果为true,则使用公司名称
}

更多请参考官方文档

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。