Electron 使⽤ electron-builder 打包应用

news/2024/10/4 6:59:35 标签: electron, javascript, 前端

electron有几种打包方式,我使用的是electron-builder。虽然下载依赖的时候让我暴躁,使用起来也很繁琐,但是它能进行很多自定义,打包完成后的体积也要小一些。

electronbuilder_3">安装electron-builder

npm install electron-builder -D

使用 npm 下载 electron-builder 真的非常非常难受! 总是失败!

electron-builder官方建议使用yarn下载,并且明确表示Yarn is strongly recommended instead of npm.

yarn add electron-builder --dev

package.json 中进⾏相关配置:

{
  "name": "my-electron-app", // 应⽤程序的名称
  "version": "1.0.0", // 应⽤程序的版本
  "main": "main.js", // 应⽤程序的⼊⼝⽂件
  "scripts": {
  "start": "electron .", // 使⽤ `electron .` 命令启动应⽤程序
  "build": "electron-builder" // 使⽤ `electron-builder` 打包应⽤程序,⽣成安装包
  },
  "build": {
  "appId": "my-electron-app", // 应⽤程序的唯⼀标识符
  // 打包windows平台安装包的具体配置
  "win": {
  "icon": "./favicon.ico", //应⽤图标
  "target": [
  {
  "target": "nsis", // 指定使⽤ NSIS 作为安装程序格式
  "arch": ["x64"] // ⽣成 64 位安装包
  }
  ]
  },
  "nsis": {
  "oneClick": false, // 设置为 `false` 使安装程序显示安装向导界⾯,⽽不是⼀键安装
  "perMachine": true, // 允许每台机器安装⼀次,⽽不是每个⽤户都安装
  "allowToChangeInstallationDirectory": true // 允许⽤户在安装过程中选择安装⽬录
  }
  },
  "devDependencies": {
  "electron": "^30.0.0", // 开发依赖中的 Electron 版本
  "electron-builder": "^24.13.3" // 开发依赖中的 `electron-builder` 版本
  },
  "author": "zhangSan", // 作者信息
  "license": "ISC", // 许可证信息
  "description": "一个测试用的electron项目" // 应⽤程序的描述
}

配置完成后,执行打包命令:

npm run build

问题及解决方案

下载Electron v32.1.2 的压缩包时出现了问题,导致后续的操作无法进行:

在这里插入图片描述
Electron 默认打包会从github上下载相关二进制包,在国内访问github非常慢,下载相关资源失败是很可能的事情。

直接通过浏览器访问 https://github.com/electron/electron/releases/download/v32.1.2/electron-v32.1.2-win32-x64.zip,看是否能够正常下载:
在这里插入图片描述

解决方案

  1. 翻一下墙,打开开关,解决问题
  2. 配置electron相关资源的镜像源

修改npm配置文件(没有就创建):

  • 可以在终端输入npm config edit命令,打开.npmrc文件
  • 可以按路径C:\Users\PC找到.npmrc文件并打开
  • 设置 electronelectron-builder-binaries 的镜像地址:
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
always-auth=false

electron_mirror:这个环境变量指定了 Electron 的下载镜像地址。当项目需要下载 Electron 时,会优先从这个地址去获取二进制文件。
electron_builder_binaries_mirror:这个环境变量指定了 electron-builder-binaries 的下载镜像地址。electron-builder 是一个用于构建 Electron 应用的工具,而 electron-builder-binaries 包含了一些预编译的二进制文件,用于不同的平台和架构。设置这个镜像地址可以确保在构建过程中能够快速、稳定地获取这些二进制文件。
always-auth=false:表示在访问这些镜像资源时不需要进行身份验证。

.ico文件的尺寸至少是256 * 256

在这里插入图片描述
重新生成符合要求的favicon.ico


http://www.niftyadmin.cn/n/5689651.html

相关文章

InfoGAN:通过信息最大化生成对抗网络进行可解释的表示学习

系列文章目录 一 Conditional Generative Adversarial Nets 二 cGANs with Projection Discriminator 三 Conditional Image Synthesis with Auxiliary Classifier GANs 四 InfoGAN: Interpretable Representation Learning by Information Maximizing Generative Adversarial…

《C++音频降噪秘籍:让声音纯净如初》

在音频处理领域,降噪是一项至关重要的任务。无论是录制音乐、语音通话还是音频后期制作,都需要有效地去除背景噪声,以获得清晰、纯净的音频效果。在 C中实现高效的音频降噪处理,可以为音频应用带来更高的质量和更好的用户体验。本…

【MATLAB2024b】安装离线帮助文档(windows)

文章目录 一、在 MATLAB 设置中安装二、从math works 网站下载ISO:给无法联网的电脑安装 版本:matlab 2024b(或者大于等于2023a) 所需空间:10~15 GB 平台:Windows 需要注册math works账号。 一、在 MATLAB …

Ps:打开与置入

在 Adobe Photoshop 中,理解不同的“打开”和“置入”命令及其用途,可以根据不同的需求选择最佳方式来管理和编辑图像文件。 ◆ ◆ ◆ 打开 1、Ps菜单:文件/打开 File/Open 快捷键:Ctrl O 用于直接打开现有的图像文件。 打开的…

Python酷库之旅-第三方库Pandas(104)

目录 一、用法精讲 451、pandas.DataFrame.pow方法 451-1、语法 451-2、参数 451-3、功能 451-4、返回值 451-5、说明 451-6、用法 451-6-1、数据准备 451-6-2、代码示例 451-6-3、结果输出 452、pandas.DataFrame.dot方法 452-1、语法 452-2、参数 452-3、功能…

Stable Diffusion绘画 | 来训练属于自己的模型:LoRA模型验收

我们每次训练出来的模型,一般都会生成 20-30 个,至于哪个模型符合要求,较为理想呢? 接下来需要对每个 LoRA模型 进行逐一对比测试。 为了测试模型的泛化性,可选择使用一些较为特殊的提示词,看看各个模型对…

vue 不是spa 单页面应用吗? 配置路由工作模式为history 后 ,为什么配置Nginx的 try_files 可以根据url 找到对应的文件?

免责申明 记录用,本人主要是后端,可能理解有误 Vue.js 是一个前端框架,主要用于构建单页面应用程序(SPA)。然而,Nginx 是一个服务器端的应用程序,负责处理 HTTP 请求并返回相应的资源。 当在 Vue.js 应用…

虚拟机 VMware 安装 macOS

macOS 界面 MAC OS IOS下载: amacOS Monterey by Techrechard.comwmacOS Monterey by Techrechard.com 下载:Unlocker-v2.0.1-x64 Mac OS X 虚拟机中更改屏幕分辨率 终端输入命令: sudo defaults write /Library/Preferences/com.apple.w…