Electron 跨平台打包

最近利用 Electron 制作跨平台安装包,记录步骤,踩坑多多。

首先,一步步搭建项目

一、搭建环境

初始化 package.json,这里要求 node 版本不低于14.16,我用的 v14.16.0,16版本在 Linux 下容易出现安装依赖丢失的问题,安装 Electron 基础环境,安装 Electron-builder 跨平台构建工具,官方推荐 Electron-forge,都差不多,electron-package 也行

npm init
pnpm i -D electron electron-builder

我这里使用 electron@28.0.0 electron-builder@24.9.1

main.js:主进程执行代码

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')function createWindow () {// 创建浏览器窗口const mainWindow = new BrowserWindow({width: 800, // 窗口分辨率height: 600,// fullscreen: true, // 是否全屏webPreferences: {preload: path.join(__dirname, 'preload.js')}, // 渲染进程frame: false, // 无边框窗口// titleBarStyle: 'hidden', // 隐藏title工具栏// titleBarStyle: 'customButtonsOnHover',// transparent: true // 窗口透明})// 判断如果是开发环境if (!app.isPackaged) {mainWindow.loadURL("http://10.0.192:80") //这里改成自己的项目启动端口} else {// 加载 index.htmlmainWindow.loadFile("dist/index2.html") // 将该行改为下面这一行,加载url}// 打开开发工具// mainWindow.webContents.openDevTools()
}// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', function () {// 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他// 打开的窗口,那么程序会重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在
// 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})// 在这个文件中,你可以包含应用程序剩余的所有部分的代码,
// 也可以拆分成几个文件,然后用 require 导入。

preload.js 渲染进程执行代码

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})

dist/index2.html 打包文件,仅作为测试使用

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><title></title><link rel="shortcut icon" href="#"/>
</head>
<body style="overflow: hidden">
<script>setTimeout(_ => {location.href = 'http://10.0.192.80/#/Login?from=socluster'}, 500)
</script>
</body>
</html>

因为很多包都是 githup 访问,可能有些时候需要翻墙,我们这里使用国内包套镜像

electron.configelectron 编译相关配置,这里 windows 下,使用32位,要不安装包比较大, 还慢

{"files": ["main.js", "preload.js", "dist"],"appId": "SoClass","productName": "SoClass","copyright": "中广上洋","directories": {"output": "build"},"win": {"target": [{"target": "nsis","arch": ["ia32"]}]},"mac": {"category": "public.app-category.developer-tools","target": ["dmg", "zip"]},"linux": {"target": [{"target": "deb","arch": ["arm64"]}]},"extends": false,"asar": true,"nsis": {"oneClick": false, // 安装包执行快速安装"allowToChangeInstallationDirectory": true // 允许用户选择自定义目录}
}

.npmrc: 配偶 npm 依赖下载源

registry=https://registry.npm.taobao.org/
disturl=https://npm.taobao.org/mirrors/node
electron_mirror=https://npm.taobao.org/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/
二、构建项目(开发/生产)

配置开发环境和生产环境命令,这里新增 electron 相关命令,serve 启动本地开发服务器,win 构建 windows 平台安装包,max 构建 macos 环境安装包,linux 构建 linux x86 环境安装包,arm 构建 linux arm64 环境安装包

package.json 核心配置

script: {"dev": "cross-env NODE_TYPE=development webpack server --progress --config ./config/webpack.config.js --mode=development","build": "cross-env NODE_TYPE=production webpack --progress --config ./config/webpack.config.js --mode=production","electron:serve": "electron . --no-sandbox","electron:win": "electron-builder --config electron.config.json","electron:mac": "electron-builder --config electron.config.json -m","electron:linux": "electron-builder --config electron.config.json -l --x64","electron:arm": "USE_SYSTEM_FPM=true electron-builder --config electron.config.json -l --arm64"
}

执行 npm run electron:serve,启动本地开发服务器,成功,差不多了,热更新也有,工具栏的菜单都支持自定义开发

在这里插入图片描述

接下来,我们打包 windows 安装包,npm run electron:serve,构建安装包

在这里插入图片描述
构建完成,可以看到生成 build 文件夹,并且包含可执行文件 exe与安装包,运行 exe 与安装包

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

完美运行,如果想打 linux 包可以搭建虚拟机来,或者搞个 linux 服务器,下篇文章我们搭建 Linux 环境并且构建安装包

三、相关文章
  • Linux arm架构下构建Electron安装包

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/217408.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++入门(浅谈类和对象)

1 命名空间 1-1命名空间的定义 定义命名空间的目的是为了不与标识符的名称进行冲突&#xff0c;命名空间中可以定义函数&#xff0c;变量&#xff0c;类型。 比如&#xff1a;这里的rand和strlens其实是函数&#xff0c;在命名空间中可以避免与全局作用域中的rand函数和strlen…

【PgSQL】导出表结构为EXCEL

详细SQL语句&#xff1a; C.relname ‘你的表名’ 直接输入表面即可 PgSQL 打印表结构语句 SELECT C.relname AS "表名",CAST(obj_description(C.oid, pg_class) AS VARCHAR) AS "表名描述",A.attname AS "字段名",CASE WHEN A.attnotnull f …

ArcGIS导入excel中的经纬度信息,绘制矢量

1.首先整理坐标信息 2.其次转成2003格式的excel文件 3.导入arcgis&#xff0c;点击右键添加excel数据 4.显示xy数据 5.显示经度和纬度信息 6&#xff1a;点击【地理坐标系】->【World】->【WGS 1984】->【确定】 7.投影带的确定方式&#xff1a; 因为自己一直…

智慧城市/一网统管建设:人员危险行为检测算法,为城市安全保驾护航

随着人们压力的不断增加&#xff0c;经常会看见在日常生活中由于小摩擦造成的大事故。如何在事故发生时进行及时告警&#xff0c;又如何在事故发生后进行证据搜索与事件溯源&#xff1f;旭帆科技智能视频监控人员危险行为/事件检测算法可以给出答案。 全程监控&#xff0c;有源…

hive聚合函数之排序

1 全局排序&#xff08;Order By&#xff09; Order By&#xff1a;全局排序&#xff0c;只有一个Reduce。 (1&#xff09;.使用Order By子句排序 asc&#xff08;ascend&#xff09;&#xff1a;升序&#xff08;默认&#xff09; desc&#xff08;descend&#xff09;&#…

汽车清除积碳和清洗节气门

汽车清除积碳和清洗节气门 汽车需要清除积碳的部位检查积碳方法&#xff1a; 清除积碳和清洗节气门风险&#xff1a;燃油宝 第一次清除积碳1万公里2万公里3万公里--5万公里6万公里以上 汽车需要清除积碳的部位 节气门喷油嘴进气道燃烧室 检查积碳方法&#xff1a; 建议每3到5…

ControlNet on diffusers

ControlNet on diffusers 参考&#xff1a;https://huggingface.co/docs/diffusers/using-diffusers/controlnet v0.24.0 ControlNet 通过输入给 diffusion 模型一个额外的输入图作为条件&#xff0c;来控制生成图的结果。这个条件输入图可以是各种形式&#xff0c;如 canny 边…

Ubuntu如何安装KVM

环境&#xff1a; 联想E14笔记本 Ubuntu20.04 问题描述&#xff1a; Ubuntu如何安装KVM 解决方案&#xff1a; 1.验证CPU是否支持硬件虚拟化 rootst-ThinkPad-E14:~# grep -Eoc (vmx|svm) /proc/cpuinfo 162.检查 VT 是否在 BIOS 中启用 安装 apt install cpu-checker …

Draw.io or diagrams.net 使用方法

0 Preface/Foreword 在工作中&#xff0c;经常需要用到框图&#xff0c;流程图&#xff0c;时序图&#xff0c;等等&#xff0c;draw.io可以完成以上工作。 official website:draw.io 1 Usage 1.1 VS code插件 draw.io可以扩展到VS code工具中。

Vue 详细教程

Vue实战 1. Vue 引言 渐进式 JavaScript 框架 --摘自官网 官网地址&#xff1a;Vue.js - 渐进式 JavaScript 框架 | Vue.js # 渐进式 1. 易用 html css javascript 2. 高效 开发前端页面 非常高效 3. 灵活 开发灵活 多样性 # 总结 Vue 是一个javascript 框架 js 简化页面js操作…

单机环境下一人一单

优惠券秒杀 添加优惠卷 店铺发布优惠券又分为平价券和特价券, 平价券可以任意购买而特价券需要秒杀抢购(限制数量和时间) tb_voucher(平价券): 优惠券的基本信息 tb_seckill_voucher(秒杀券): 有voucher_id字段表示具有优惠卷的基本信息,此外还有库存,开始抢购时间,结束抢购…

Java使用Microsoft Entra微软 SSO 认证接入

1. Microsoft Entra Microsoft Entra ID 是基于云的标识和访问管理服务&#xff0c;可帮助员工访问外部资源。 示例资源包括 Microsoft 365、Azure 门户以及成千上万的其他 SaaS 应用程序。 Microsoft Entra ID 还可帮助他们访问你的企业 Intranet 上的应用等内部资源&#x…

每天五分钟计算机视觉:GoogLeNet的核心模型结构——Inception

本文重点 当构建卷积神经网络的时候,我们需要判断我们的过滤器的大小,这往往也作为一个超参数需要我们进行选择。过滤器的大小究竟是 11,33 还是 55,或者要不要添加池化层,这些都需要我们进行选择。而本文介绍的Inception网络的作用就是代替你来决定,把它变成参数的一部…

利用Pytorch预训练模型进行图像分类

Use Pre-trained models for Image Classification. # This post is rectified on the base of https://learnopencv.com/pytorch-for-beginners-image-classification-using-pre-trained-models/# And we have re-orginaized the code script.预训练模型(Pre-trained models)…

uniapp交互反馈api的使用示例

官方文档链接&#xff1a;uni.showToast(OBJECT) | uni-app官网 1.uni.showToast({}) 显示消息提示框。 常用属性&#xff1a; title:页面提示的内容 image&#xff1a;改变提示框默认的icon图标 duration&#xff1a;提示框在页面显示多少秒才让它消失 添加了image属性后。 注…

前端体系:前端应用

目录 前端体系基础 html&#xff08;超文本标记语言&#xff09; css&#xff08;层叠样式单&#xff09; javascript&#xff08;&#xff09; 一、前端体系概述 二、前端框架 React Vue Angular 三、前端库和工具 lodash Redux Webpack 四、模块化和组件化 ES…

Java中的链表

文章目录 前言一、链表的概念及结构二、单向不带头非循坏链表的实现2.1打印链表2.2求链表的长度2.3头插法2.4尾插法2.5任意位置插入2.6查找是否包含某个元素的节点2.7删除第一次出现这个元素的节点2.8删除包含这个元素的所以节点2.9清空链表单向链表的测试 三、双向不带头非循坏…

RNN介绍及Pytorch源码解析

介绍一下RNN模型的结构以及源码&#xff0c;用作自己复习的材料。 RNN模型所对应的源码在&#xff1a;\PyTorch\Lib\site-packages\torch\nn\modules\RNN.py文件中。 RNN的模型图如下&#xff1a; 源码注释中写道&#xff0c;RNN的数学公式&#xff1a; 表示在时刻的隐藏状态…

可替代LM5145,5.5V-100V Vin同步降压控制器_SCT82A30

SCT82A30是一款100V电压模式控制同步降压控制器&#xff0c;具有线路前馈。40ns受控高压侧MOSFET的最小导通时间支持高转换比&#xff0c;实现从48V输入到低压轨的直接降压转换&#xff0c;降低了系统复杂性和解决方案成本。如果需要&#xff0c;在低至6V的输入电压下降期间&am…

C语言之文件操作(下)

C语言之文件操作&#xff08;下&#xff09; 文章目录 C语言之文件操作&#xff08;下&#xff09;1. 文件的顺序读写1.1 文件的顺序读写函数1.1.1 字符输入/输出函数&#xff08;fgetc/fputc&#xff09;1.1.2 ⽂本⾏输⼊/输出函数&#xff08;fgets/fputs&#xff09;1.1.3 格…