electron-builder 的基本使用

electron打包说明

打包步骤

step1: 将 index.html 放到 h5 目录中

step2:在h5目录中 执行打包命令

shell 复制代码
yarn electron-builder

打包结果

会生成一个 字里华夏 的目录,

1、cd 到 字里华夏 目录 其中有一个 字里华夏Setup1.2.0.exe文件, 这个是 桌面应用的 安装文件。

2、再cd到 win-uppacked 目录下,有一个 字里华夏.exe 文件,这个是 桌面应用 的直接启动文件。

打包配置

1、main.js 文件中,有相关的打包配置

2、在 packge.json 中, 也有相关的 打包配置

打包 主体依赖

electron-builder 作为一个用于 Electron 应用程序打包的工具,需要下载并使用 Electron 运行时来创建可执行文件。

在您的应用程序中,您使用的是 Electron 的 API 和功能,并且在打包时,electron-builder 将这些文件放入一个自包含的二进制文件中。

这样可以确保应用程序在不同平台上的运行稳定性,并且与操作系统和其他应用程序之间的兼容性。

在打包过程中,electron-builder 会下载您指定的 Electron 版本,例如 electron-v12.2.3-win32-x64.zip,然后解压缩这个 zip 包,并将其中的内容打包到您的应用程序中,使其成为一个可执行文件。这个 zip 包中包含了 Electron 运行时所需要的所有文件,例如 Node.js、Chromium 等。

首次打包

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

其依赖 包 有以下三个:

  • 下载 electron-v9.0.2-win32-x64.zip 放在下面目录
shell 复制代码
C:\Users\hero\AppData\Local\electron\Cache
  • 下载 winCodeSign-2.6.0.7z 放在下面目录
shell 复制代码
C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign
  • nsis-3.0.4.1.7z
shell 复制代码
C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis

为了防止 github 访问不了的情况, 我把 以上的三个依赖, 都 放在了 depends 目录下了。

使用的时候,直接 将 electron.zip 解压 结果 和 electron-builder.zip 解压 结果

放到 C:\Users\hero\AppData\Local\下;

特别说明

1、不要修改 h5 的 目录名称

相关推荐
Apifox8 分钟前
如何让 Apifox 发布的在线文档具备更好的调试体验?
前端·后端·测试
咔咔一顿操作12 分钟前
【CSS 3D 交互】打造沉浸式 3D 照片墙:结合 JS 实现拖拽交互
前端·javascript·css·3d·交互·css3
0x00014 分钟前
Uniapp - 自定义 Tabbar 实现
前端·uni-app
用户4582031531716 分钟前
Flexbox布局上手:10分钟告别垂直居中难题
前端·css
牛蛙点点申请出战17 分钟前
仿微信语音 WaveView 实现
android·前端·ios
yiyesushu18 分钟前
react + next.js + ethers v6 项目实例
前端
明远湖之鱼19 分钟前
巧用 Puppeteer + Cheerio:批量生成高质量 Emoji 图片
前端·爬虫·node.js
落笔忆梦21 分钟前
利用浏览器空闲时间优化资源加载与渲染
前端·javascript
艾小码22 分钟前
还在用Vue 2硬撑?升级Vue 3的避坑指南来了!
前端·javascript·vue.js
是晓晓吖22 分钟前
page.waitForResponse 执行环境:页面还是 Node.js?
前端·puppeteer