electron-builder打包步骤以及常见问题

1.安装 electron-builder
在你的 Electron 项目中,通过 npm 或 yarn 安装 electron-builder

npm install --save-dev electron-builder

2.配置 package.json
在项目的 package.json 文件中,添加 electron-builder 相关的配置。这通常包括 build 字段,用于指定打包的详细信息,如目标平台、输出目录、应用程序的元数据等。

"build": {  
  "appId": "com.example.yourapp",  
  "productName": "Your App Name",  
  "win": {  
    "target": ["nsis", "zip"],  
    "icon": "build/icon.ico"  
  },  
  "mac": {  
    "category": "your.app.category.type",  
    "icon": "build/icon.icns"  
  },  
  "linux": {  
    "target": [  
      "AppImage",  
      "deb"  
    ],  
    "category": "Utility",  
    "icon": "build/icon.png"  
  },  
  "directories": {  
    "output": "dist"  
  }  
}

3.编写打包脚本(可选):
在 package.json 的 scripts 字段中,你可以添加一个脚本来执行打包操作。例如:

"scripts": {  
  "dist": "electron-builder"  
}

4.执行打包
直接在命令行中运行 electron-builder 命令(或使用上述定义的脚本),将会开始打包过程。

npm run dist

5.检查打包结果
打包完成后,你可以在指定的输出目录(如上面配置的 dist 目录)中找到打包生成的文件。

 注:具体可看electron-builder官方文档:https://github.com/QDMarkMan/CodeBlog/blob/master/Electron/electron-builder%E6%89%93%E5%8C%85%E8%AF%A6%E8%A7%A3.md

常见问题:

主要在于依赖问题导致打包不成功一直报错!!!

然后就是github的原因导致下载很慢超时等情况!!!

解决方案:

打包 主体依赖

electron-builder 作为一个用于 Electron 应用程序打包的工具,需要下载并使用 Electron 运行时来创建可执行文件。
在您的应用程序中,您使用的是 Electron 的 API 和功能,并且在打包时,electron-builder 将这些文件放入一个自包含的二进制文件中。
这样可以确保应用程序在不同平台上的运行稳定性,并且与操作系统和其他应用程序之间的兼容性。
在打包过程中,electron-builder 会下载您指定的 Electron 版本,例如 electron-v12.2.3-win32-x64.zip,然后解压缩这个 zip 包,并将其中的内容打包到您的应用程序中,使其成为一个可执行文件。这个 zip 包中包含了 Electron 运行时所需要的所有文件,例如 Node.js、Chromium 等。

首次打包

由上所述, 第一次 执行  npm electron-builder 打包的命令时, 会到 GitHub (https://github.com/electron/electron/releases/)上下载 electron-builder 的依赖包失。
其依赖 包 有以下三个:

下载 electron-v9.0.2-win32-x64.zip 放在下面目录

C:\Users\hero\AppData\Local\electron\Cache

下载 winCodeSign-2.6.0.7z 放在下面目录

C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign

nsis-3.0.4.1.7z

C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis

为了防止 github 访问不了的情况, 我把 以上的三个依赖, 都 放在了 depends 目录下了。
使用的时候,直接 将 electron.zip 解压 结果 和 electron-builder.zip 解压 结果
放到 C:\Users\hero\AppData\Local\下;

按照步骤操作执行就可以啦!!!

最后祝各位都能顺利打包成功!!!

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值