脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Electron  electron-builder 打包

Electron 使⽤ electron-builder 打包应用过程详解

 更新时间：2024年10月09日 09:34:56   作者：fishmemory7sec  
Electron应用开发中,electron-builder是一个常用的打包工具,提供了多种自定义配置,不过,使用npm安装electron-builder时可能会遇到下载依赖慢或失败的问题,本文给大家介绍Electron 使⽤ electron-builder 打包应用的相关操作,感兴趣的朋友一起看看吧

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

安装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，看是否能够正常下载：

解决方案

  • 翻一下墙，打开开关，解决问题
  • 配置electron相关资源的镜像源

修改npm配置文件（没有就创建）：

  • 可以在终端输入npm config edit命令，打开.npmrc文件
  • 可以按路径C:\Users\PC找到.npmrc文件并打开
  • 设置 electron 和 electron-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

到此这篇关于Electron 使⽤ electron-builder 打包应用的文章就介绍到这了,更多相关Electron electron-builder 打包应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js获取当前日期代码适用于网页头部

    js获取当前日期代码适用于网页头部

    大家在浏览网页时可能会注意到网页头部有个不错的时间在显示，看起来感觉不错于是自己也实现了一个，下面是具体的代码，感兴趣的朋友可以参考下哈
    2013-06-06
  • JS实现的JSON数组去重算法示例

    JS实现的JSON数组去重算法示例

    这篇文章主要介绍了JS实现的JSON数组去重算法,结合实例形式分析了javascript针对json数组的遍历、判断实现去重复功能相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • 简单实现js选项卡切换效果

    简单实现js选项卡切换效果

    这篇文章主要为大家介绍了简单实现js选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • js 验证密码强弱的小例子

    js 验证密码强弱的小例子

    js 验证密码强弱的小例子，需要的朋友可以参考一下
    2013-03-03
  • 微信小程序和百度的语音识别接口详解

    微信小程序和百度的语音识别接口详解

    这篇文章主要介绍了微信小程序和百度的语音识别接口详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • js 字符串转化成数字的代码

    js 字符串转化成数字的代码

    js 字符串转化成数字的代码，需要的朋友可以参考下。
    2011-06-06
  • 整理关于Bootstrap列表组的慕课笔记

    整理关于Bootstrap列表组的慕课笔记

    这篇文章主要为大家整理了关于Bootstrap列表组的慕课笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JavaScript一元正号运算符示例代码

    JavaScript一元正号运算符示例代码

    这篇文章主要给大家介绍了关于JavaScript一元正号运算符的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • JSONP跨域模拟百度搜索

    JSONP跨域模拟百度搜索

    这篇文章主要介绍了JSONP跨域模拟百度搜索,JSONP是JSON with padding 的简写,应用JSON的一种新方法，在后来的Web服务中非常流行，JSONP看起来与JSON差不多，只不过是被包含在函数中调用的JSON,对此感兴趣的小伙伴可以参考一下下面文章内容
    2021-12-12
  • js实现PC端根据IP定位当前城市地理位置

    js实现PC端根据IP定位当前城市地理位置

    本文主要分享了js实现PC端根据IP定位当前城市地理位置的方法，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02

最新评论