electron打包基本教程
从0开始搭建
- 概要
- 步骤
- 基础软件
- 运行项目
- 打包项目
- 注意事项
概要
将html打包成桌面的主流有electron和nwjs,nwjs更加简单,但是使用效果不如electron,electron打包比较麻烦,但是效果比较好,反正各有优势和缺点
步骤
基础软件
- nodejs
官网下载
阿里下载
# 验证版本
node -v
v22.13.0
- npm
nodejs自带npm,直接查看版本
npm -v
10.9.2
- cnpm
国内用户需安装这个,你懂的
#使用 npm 全局安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 生成项目
- 创建目录 my-electron-app
- 进入目录,命令创建
cnpm init -y
# -y 参数表示使用默认配置快速初始化,免去手动回答一系列问题的步骤。
- 添加依赖
# 用于开发
cnpm install electron --save-dev
# 用于打包
cnpm install electron-builder --save-dev
- 指定国内地址
打包时会到github下载很多文件,如果连接github不顺畅,可以指定国内地址
"build": {"electronDownload": {"mirror": "https://registry.npmmirror.com/-/binary/electron/"},"appId": "com.cn.app","mac": {"target": "dmg"},"win": {"target": "nsis"},"linux": {"target": "AppImage"}},
- 完整项目结构

- app:需要打包的html网站,这里测试添加了一个简单的html单文件
- dist:打包后文件目录
- node_modules:node依赖包,自动生成的
- main.js:项目主入口,package.json中指定
- package.json:项目结构
main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}});// win.loadURL('https://github.com');win.loadFile(path.join(__dirname, 'app', 'index.html'));
}app.whenReady().then(createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}
});
package.json
{"name": "my-electron-app","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron .","build": "electron-builder"},"build": {"electronDownload": {"mirror": "https://registry.npmmirror.com/-/binary/electron/"},"appId": "com.cn.app","mac": {"target": "dmg"},"win": {"target": "nsis"},"linux": {"target": "AppImage"}},"keywords": [],"author": "","license": "ISC","devDependencies": {"electron": "^34.2.0","electron-builder": "^25.1.8"}
}
运行项目
# cmd命令
cnpm run start
运行后出现浏览器,里面是app包含的网站

打包项目
cnpm run build
- 打包中会出现访问winCodeSign(github)失败,这个主要用于软件签名,防止软件被篡改,如果签名失败也会打包项目,但是项目名字是
win-unpacked,意思未签名打包目录 - 打开win-unpacked

注意事项
- 远程打包失败,可以下载electron到本地,指定本地打包
https://npmmirror.com/mirrors/electron/
更多方法豆包[electron国内下载打包方法]
相关文章:
electron打包基本教程
从0开始搭建 概要步骤基础软件运行项目打包项目 注意事项 概要 将html打包成桌面的主流有electron和nwjs,nwjs更加简单,但是使用效果不如electron,electron打包比较麻烦,但是效果比较好,反正各有优势和缺点 步骤 基…...
实现pytorch注意力机制-one demo
主要组成部分: 1. 定义注意力层: 定义一个Attention_Layer类,接受两个参数:hidden_dim(隐藏层维度)和is_bi_rnn(是否是双向RNN)。 2. 定义前向传播: 定义了注意力层的…...
深入Flask:如何优雅地处理HTTP请求与响应
哈喽,大家好,我是木头左! 本文将带你深入了解如何在Flask中优雅地处理HTTP请求和响应,让你的应用更加高效、安全和用户友好。 创建一个简单的Flask应用 让从创建一个最简单的Flask应用开始: from flask import Flaskapp = Flask(__name__)@app.route(/) def...
JVM ②-双亲委派模型 || 垃圾回收GC
这里是Themberfue 在上节课对内存区域划分以及类加载的过程有了简单的了解后,我们再了解其他两个较为重要的机制,这些都是面试中常考的知识点,有必要的话建议背出来,当然不是死记硬背,而是要有理解的背~~~如果对 JVM …...
jQuery介绍(快速、简洁JavaScript库,诞生于2006年,主要目标是简化HTML文档操作、事件处理、动画和Ajax交互)
文章目录 **核心功能 & 亮点**1. **简化 DOM 操作**2. **链式调用**3. **跨浏览器兼容**4. **便捷的事件绑定**5. **Ajax 封装**6. **动画效果** **现状与适用场景**- **传统项目维护**:许多旧系统(如 WordPress 插件、老企业网站)仍依赖…...
python旅游推荐系统+爬虫+可视化(协同过滤算法)
✅️基于用户的协同过滤算法 ✅️有后台管理 ✅️2w多数据集 这个旅游数据分析推荐系统采用了Python语言、Django框架、MySQL数据库、requests库进行网络爬虫开发、机器学习中的协同过滤算法、ECharts数据可视化技术,以实现从网站抓取旅游数据、个性化推荐和直观展…...
Ubuntu 22.04.5 LTS 安装企业微信,(2025-02-17安装可行)
一、依赖包(Ubuntu 20.04/Debian 11) 点击下载https://www.spark-app.store/download_dependencies_latest 1、 下载最新的依赖包。 请访问星火应用商店依赖包下载页面, 下载最新的依赖包。2、解压依赖包 </...
【Excel笔记_6】条件格式和自定义格式设置表中数值超过100保留1位,超过1000保留0位,低于100为默认
方法一:自定义格式 选中需要设置格式的单元格区域。右键选择设置单元格格式,或者在工具栏中选择开始 -> 数字 -> 自定义格式。在类型框中输入以下自定义格式: [>1000]0;[>100]0.0;G/通用格式解释: [>1000]0&…...
UDP与TCP
用UDP一定比用TCP快吗? 假设我们需要在a电脑的进程发一段数据到b电脑的进程我们可以选择使用TCP或UDP协议进行通信。 对于TCP这样的可靠性协议每次消息发出后都能明确知道对方有没有收到,就像打电话一样,只要“喂喂"两下对方就能回你个…...
Web开发技术概述
Web开发技术涵盖了前端和后端开发,以及数据库技术。前端开发包括使用HTML、CSS、JavaScript等原生技术,以及jQuery、Bootstrap、AngularJS、React、Vue等框架。后端开发则涉及ASP.NET、PHP、Python Web(Flask、Django)、Java Web&…...
解压rar格式的软件有哪些?8种方法(Win/Mac/手机/网页端)
RAR 文件是一种常见的压缩文件格式,由尤金・罗谢尔(Eugene Roshal)开发,因其扩展名 “rar” 而得名。它通过特定算法将一个或多个文件、文件夹进行压缩,大幅减小存储空间,方便数据传输与备份。然而…...
uniapp开发:首次进入 App 弹出隐私协议窗口
前言:在移动应用开发中,隐私协议弹窗是一个非常重要的功能。它不仅符合法律法规的要求(如 GDPR、CCPA 等),还能增强用户对 App 的信任感。本文将介绍如何在 Uniapp 开发的 App 中实现“首次进入弹出隐私协议窗口&#…...
执行pnpm run dev报错:node:events:491 throw er; // Unhandled ‘error‘ event的解决方案
vite搭建的vue项目,使用pnpm包管理工具,执行pnpm run dev,报如下错误: 报错原因: pnpm依赖安装不完整,缺少esbuild.exe文件,导致无法执行启动命令。 解决方案: 根据错误提示中提到…...
OpenCV机器学习(4)k-近邻算法(k-Nearest Neighbors, KNN)cv::ml::KNearest类
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::ml::KNearest 是 OpenCV 机器学习模块中的一部分,它提供了实现 k-近邻算法(k-Nearest Neighbors, KNN)的…...
JVM中的线程池详解:原理→实践
一、为什么需要线程池? 在多线程编程中,频繁地创建和销毁线程会带来显著的性能开销。 想象一下,如果你经营一家西餐厅,每次有顾客到来你都雇佣新的服务员,顾客吃完结账后就解雇——这种模式是不是非常效率低下且成本高…...
SNARKs 和 UTXO链的未来
1. 引言 SNARKs 经常被视为“解决”扩容问题的灵丹妙药。虽然 SNARKs 可以提供令人难以置信的好处,但也需要承认其局限性——SNARKs 无法解决区块链目前面临的现有带宽限制。 本文旨在通过对 SNARKs 对比特币能做什么和不能做什么进行(相对)…...
JavaScript设计模式 -- 外观模式
在实际开发中,往往会遇到多个子系统协同工作时,直接操作各个子系统不仅接口繁琐,还容易导致客户端与内部实现紧密耦合。**外观模式(Facade Pattern)**通过为多个子系统提供一个统一的高层接口,将复杂性隐藏…...
百达翡丽(Patek Philippe):瑞士制表的巅峰之作(中英双语)
百达翡丽(Patek Philippe):瑞士制表的巅峰之作 在钟表界,百达翡丽(Patek Philippe) 一直被誉为“世界三大名表”之一,并且常被认为是其中的至高存在。一句“没人能真正拥有一枚百达翡丽&#x…...
阿里云一键部署DeepSeek-V3、DeepSeek-R1模型
目录 支持的模型列表 模型部署 模型调用 WebUI使用 在线调试 API调用 关于成本 FAQ 点击部署后服务长时间等待 服务部署成功后,调用API返回404 请求太长导致EAS网关超时 部署完成后,如何在EAS的在线调试页面调试 模型部署之后没有“联网搜索…...
分享一款AI绘画图片展示和分享的小程序
🎨奇绘图册 【开源】一款帮AI绘画爱好者维护绘图作品的小程序 查看Demo 反馈 github 文章目录 前言一、奇绘图册是什么?二、项目全景三、预览体验3.1 截图示例3.2 在线体验 四、功能介绍4.1 小程序4.2 服务端 五、安装部署5.1 快速开始~~5.2 手动部…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
嵌入式学习笔记DAY33(网络编程——TCP)
一、网络架构 C/S (client/server 客户端/服务器):由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序,负责提供用户界面和交互逻辑 ,接收用户输入,向服务器发送请求,并展示服务…...
基于Springboot+Vue的办公管理系统
角色: 管理员、员工 技术: 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能: 该办公管理系统是一个综合性的企业内部管理平台,旨在提升企业运营效率和员工管理水…...
水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关
在水泥厂的生产流程中,工业自动化网关起着至关重要的作用,尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关,为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多,其中不少设备采用Devicenet协议。Devicen…...
comfyui 工作流中 图生视频 如何增加视频的长度到5秒
comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗? 在ComfyUI中实现图生视频并延长到5秒,需要结合多个扩展和技巧。以下是完整解决方案: 核心工作流配置(24fps下5秒120帧) #mermaid-svg-yP…...
