当前位置：首页 > news >正文

electron 结合 react(cra创建的) 创建桌面应用和打包桌面应用

news 来源：原创 2025/8/6 21:06:59

我说一下 react 结合 electron 如果打包和使用，以及其中可能会遇到的问题，这里只做简单功能的演示

我们先通过 cra 创建一个 react 项目，然后安装相关依赖，之后启动

npx create-react-app  react_electron
cd react_electron
npm i
npm run start

这里可以看到项目已经启动起来了

此时我们先 ctrl + c 把项目关闭吧，确定能跑起来了就行

现在我们需要安装几个包，分别是一下几个

electron 用于创建桌面应用

electron-builder 用于打包桌面应用

concurrently 用于在一个终端中执行两个命令

wait-on 用于配合 concurrently ，在一个终端中，等上一个命令执行成功之后，在执行下一个命令

cross-env 用于改变环境变量，我们用来当启动的时候，不打开浏览器，只打开桌面应用

npm i -D electron electron-builder concurrently  wait-on cross-env

如果安装 electron 失败的，可以看一下这篇博客

npm安装Electron 项目失败报错问题和解决办法_npm install electron报错-CSDN博客

此时我们在项目目录添加 main.js 文件

const { app, BrowserWindow } = require('electron')
// 引入path模块
const path = require('path');
const url = require("url");// 创建一个类继承 BrowserWindow
class AppWindow extends BrowserWindow {constructor(config) {const baseConfig = {width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false,// webSecurity: false, // 注意：这会降低安全性，请谨慎使用},autoHideMenuBar: true, // ⾃动隐藏菜单栏}// const finalConfig = Object.assign(baseConfig, config)const finalConfig = {...baseConfig, ...config}super(finalConfig)this.webContents.openDevTools()}
}app.on('ready', () => {const mainWindow = new AppWindow({})// 打包的时候用// mainWindow.loadURL(url.format({// pathname: path.join(__dirname, "./build/index.html"), // relative path to the HTML-file// protocol: "file:",// slashes: true// }));// 开发的时候用mainWindow.loadURL('http://localhost:3000')})

在 package.json 文件中添加

  "author": "lysun","description": "this is a react electron project","license": "MIT","main": "main.js",

还有执行脚本 dev:ele

 "scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","dev:ele": "electron ."},

现在，我们的 electron 就基本可以使用了，不过还没有进行其他配置，我们先来简单的跑一下吧

我们开两个终端一个先执行 npm run start ，注意，这里需要等项目启动之后，再在另外一个终端中执行 npm run dev:ele

此时就会打开桌面应用了

不过现在有两个问题。

1，我们需要打开两个终端，一个执行完成之后我们在执行另外一个，可不可以直接在一个终端中进行操作；

2，假如我们只想打开桌面应用，不用打开浏览器，该怎么处理；

这里就会用到我们上面安装的其他依赖了

我们再在脚本中加一行命令

"dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && npm run dev:ele\""

上面命令表示当我们 npm run dev 的时候，不启动浏览器，然后执行 npm run start ，在等待有 http://localhost:3000 地址之后，再执行 npm run dev:ele

我们可以把刚刚的项目关闭后，直接在一个终端中输入 npm run dev 试试，就会发现，目前项目只会自己打开电脑桌面端了

之后我们在来说一下打包，打包的速度和电脑配置还有网速有关，如果电脑配置不是很高的，需要等一下。打包的时候，要把 main.js 文件中打包的路径那一段代码解开注释

之后再 package.json 中添加 electron-builder 打包配置，这里的配置有兴趣的可以自己去看一下资料

"build": {"appId": "your appId","win": {"target": [{"target": "nsis","arch": ["x64"]}]},"files": ["build/**/*","main.js"],"nsis": {"oneClick": false,"perMachine": true,"allowToChangeInstallationDirectory": true},"extends": null},

之后在添加 react 打包之后的index.html 的引用路径为相对路径

"homepage": ".",

在添加打包脚本

 "dist": "electron-builder"

然后我们先 npm run build 进行 react 项目打包，待 react 项目打包完成之后，在 npm run dist 进行 electron 打包

打包好之后，在当前目录下会生成一个 dist 文件夹

我们点击进去，点击 exe 运行文件

这样就成功打包成桌面应用了

electron 结合 react(cra创建的) 创建桌面应用和打包桌面应用

我说一下 react 结合 electron 如果打包和使用，以及其中可能会遇到的问题，这里只做简单功能的演示我们先通过 cra 创建一个 react 项目，然后安装相关依赖，之后启动 npx create-react-app react_electron cd react_electron np…...

编程日记 2025/8/6 21:06:59

C++23 views::chunk_by (P2443R1) 详解

文章目录引言C23 范围库概述范围视图（Range Views）范围算法（Range Algorithms）范围适配器（Range Adapters） std::views::chunk_by 介绍基本概念特性使用场景示例代码简单示例自定义谓词示例总结引言在…...

编程日记 2025/8/6 20:56:35

MySQL核心内容【持续更新中】

MySQL核心内容文章目录 MySQL核心内容1.MySQL核心内容目录2.MySQL知识面扩展3.MySQL安装4.MySQL配置目录介绍Mysql配置远程ip连接 5.MySQL基础1.MySQL数据类型1.数值类型2.字符串类型3.日期和时间类型4.enum和set 2.MySQL运算符1.算数运算符2.逻辑运算符3.比较运算符 3.MySQL完…...

编程日记 2025/8/6 21:00:25

【高级IO】多路转接之单线程Reactor

这里写目录标题一.Epoll的两种工作模式二.单线程Reactor1.Connection模块2.Reactor服务器模块2.1初始化Init2.2启动循环服务器Loop2.3事件派发Dispatcher2.4连接管理器Accepter2.5事件管理器Receiver2.6发送管理器Sender 3.上层业务模块定制协议业务处理代码一.Epoll的两种工…...

编程日记 2025/8/2 13:57:38

基于设备指纹识别的反爬虫技术：给设备办 “身份证”

传统的封禁 IP、验证码等反爬虫手段已逐渐失效，基于设备指纹识别的反爬虫技术应运而生，成为守护数据安全的新防线。它如同给每个设备办一张独一无二的 “身份证”，精准区分正常用户与爬虫工具。一、基础参数采集：构建设备指纹的…...

编程日记 2025/8/2 13:57:36

公开模型一切，优于DeepSeek-R1，英伟达开源Llama-Nemotron家族

在大模型飞速发展的今天，推理能力作为衡量模型智能的关键指标，更是各家 AI 企业竞相追逐的焦点。但近年来，推理效率已成为模型部署和性能的关键限制因素。基于此，英伟达推出了 Llama-Nemotron 系列模型（基于 Meta …...

编程日记 2025/8/6 21:02:28

CI/CD面试题及答案

一、CI/CD 基础概念 1. 什么是 CI/CD？CI 和 CD 的区别是什么？ 答案： CI（持续集成）：开发人员提交代码后，自动构建并运行测试，确保代码集成无冲突。CD（持续交付 / 部署&am…...

编程日记 2025/8/6 20:57:28

解决 Ubuntu DNS 无法解析问题（适用于虚拟机长期使用）

解决 Ubuntu DNS 无法解析问题在使用 Ubuntu 虚拟机（尤其是在国内）时，经常会遇到这样的错误： Temporary failure resolving cn.archive.ubuntu.com但是此时又能成功 ping 通 IP，这说明网络是正常的，问题…...

编程日记 2025/8/6 20:57:29

如何通过C# 获取Excel单元格的数据类型

在处理 Excel 文件时，了解单元格的数据类型有助于我们正确地解析和处理数据。Free Spire.XLS 是一款功能强大且免费的.NET 组件，支持高效地操作 Excel 文件，包括读取单元格类型。本文将详细介绍如何使用 Free Spire.XLS 来获取 Excel 单元格的…...

编程日记 2025/8/6 20:56:10

Spring Boot初级教程：从零搭建企业级Java应用

一、Spring Boot是什么？为什么学它？定义：Spring Boot是Spring框架的轻量级快速开发工具，基于“约定优于配置”原则，简化Spring应用的搭建与部署。核心优势：零配置起步：内置Tomcat/Jetty，无需手动部署Web服务器。自动装配：自动扫描依赖、注入Bean，减少XML/注解冗余代…...

编程日记 2025/8/6 20:56:11

IBM BAW（原BPM升级版）使用教程第六讲

一、事件：Undercover Agent 在 IBM Business Automation Workflow (BAW) 中，Undercover Agent (UCA) 是一个非常独特和强大的概念，旨在实现跨流程或系统的事件处理和触发机制。Undercover Agent 主要用于事件驱动的流程自动化，它…...

编程日记 2025/8/2 16:16:22

[250509] x-cmd 发布 v0.5.11 beta：x ping 优化、AI 模型新增支持和语言变量调整

目录 X-CMD 发布 v0.5.11 beta📃Changelog🧩 ping🧩 openai🧩 gemini🧩 asdf🧩 mac✅ 升级指南 X-CMD 发布 v0.5.11 beta 📃Changelog 🧩 ping 调整 x ping 默认参数为 bing.com&a…...

编程日记 2025/8/6 21:00:23

Web前端VSCode如何解决打开html页面中文乱码的问题（方法2）

Web前端—VSCode如何解决打开html页面中文乱码的问题（方法2） 1.打开VScode后，依次点击文件 >> 首选项 >> 设置 2.打开设置后，依次点击文本编辑器 >> 文件（或在搜索框直接搜索“files.autoGuessEnc…...

编程日记 2025/8/2 16:16:17

打造专属AI好友：小智AI聊天机器人详解

打造专属AI好友：小智AI聊天机器人详解在当下的科技热潮中，AI正迅速改变着我们的生活，成为了科技领域的新宠。而今，借助开源项目的力量，你可以亲手打造一个智能小助手——小智AI聊天机器人。它不仅是一个技术探索的窗…...

编程日记 2025/8/2 16:16:15

Spring，SpringMVC，SpringBoot,SpringCloud的区别

Spring Spring 是一个基础框架，为 Java 应用提供了 IoC（控制反转）和 AOP（面向切面编程）功能。其主要特点如下： IoC 容器：借助依赖注入，降低了组件间的耦合度。AOP 支持&#xff1a…...

编程日记 2025/8/2 16:16:13

从投入产出、效率、上手难易度等角度综合对比 pytest 和 unittest 框架

对于选择python作为测试脚本开发的同学来说，pytest和python unittest是必需了解的两个框架。那么他们有什么区别？我们该怎么选？让我们一起来了解一下吧！ 我们从投入产出、效率、上手难易度等角度综合对比 pytest 和 unittest 框架…...

编程日记 2025/8/2 16:16:10

无人机电池储存与操作指南

一、正确储存方式 1. 储存电量保持电池在 40%-60% 电量（单片电压约3.8V-3.85V）存放，避免满电或空电长期储存。满电存放会加速电解液分解，导致鼓包；**空电**存放可能引发过放（电压低于3.0V/片会永久…...

编程日记 2025/8/2 16:16:08

CSS实现图片垂直居中方法

html <div class"footer border-top-row"><div class"footer-row"><span class"footer-row-col01">制单人：{{ printData[pageIndex - 1].rkMaster.makerName}}<img :src"getPersonSignImgSrc(printData[pa…...

编程日记 2025/8/2 16:16:07

多账号管理与自动化中的浏览器指纹对抗方案

多账号管理与自动化中的浏览器指纹对抗方案在日常的开发工作中，如果你曾涉及自动化脚本、多账号运营、数据抓取，或是在安全研究方向摸爬滚打过，应该对“浏览器指纹识别”这几个字不会陌生。指纹识别：不是你以为的那种“指纹”…...

编程日记 2025/8/2 16:16:05

[6-1] TIM定时中断江协科技学习笔记（45个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 TRGO是“Trigger Output”的缩写，中文意思是“触发输出”。在STM32微控制器中，TRGO是一个非常重要的功能，它允许定时器（Timer）在特定事件发生时输出一个触发信号。这个触发信号可以用…...

编程日记 2025/8/2 16:16:03

Flutter 3.29.3 花屏问题记录

文章目录 Flutter 3.29.3 花屏问题记录问题记录解决尝试解决 Flutter 3.29.3 花屏问题记录问题记录 flutter版本3.29.3，代码大致为： ShaderMask(shaderCallback: (Rect bounds) {return LinearGradient(begin: Alignment.topCenter,end: Alignment.bo…...

编程日记 2025/8/2 16:16:01

[Windows] 希捷（Seagate）硬盘官方检测工具 - SeaTools（1.4.0.7）

[Windows] 希捷（Seagate）硬盘官方检测工具 - SeaTools 链接：https://pan.xunlei.com/s/VOPpN9A3Tn_rVktEMu6Lg9q9A1?pwdh8rz# 希望能修复好硬盘...

编程日记 2025/8/2 16:15:59

YOLOv8目标检测性能优化：损失函数改进的深度剖析

文章目录 YOLOv8 简介损失函数在 YOLOv8 中的关键作用SlideLoss 的原理与应用原理代码实例 FocalLoss 分类损失函数的优化原理代码实例 SlideLoss 与 FocalLoss 在 YOLOv8 中的协同作用实验结果与分析 YOLOv8 简介 YOLO（You Only Look Once）系列目标检测…...

编程日记 2025/8/2 16:15:57

docker 日志暴露方案（带权限还免费版本）

接到了一个需求，需求的内容是需要将测试环境的容器暴露给我们的外包同事，但是又不能将所有的容器都暴露给他们。一开始，我分别找了 Portainer log-pilot dpanel 它们都拥有非常良好的界面和容器情况可视化。但，缺点是&am…...

编程日记 2025/8/2 16:15:55

水印云：AI赋能，让图像处理变得简单高效

水印云是一款基于超强AI技术的图像处理工具，提供丰富的图像编辑功能，将复杂的图像处理极简化，真正实现简单高效的图像处理。无论是去除水印、智能抠图、添加水印，还是提升画质，水印云都能轻松应对，满足不同…...

编程日记 2025/8/2 16:15:53

使用 ECharts GL 实现交互式 3D 饼图：技术解析与实践

一、效果概览本文基于 Vue 3 和 ECharts GL，实现了一个具有以下特性的 3D 饼图： 立体视觉效果：通过参数方程构建 3D 扇形与底座动态交互：支持点击选中（位移效果）和悬停高亮（放大效果&#xff…...

编程日记 2025/8/2 16:15:51

allure生成测试报告（搭配Pytest、allure-pytest）

文章目录前言allure简介allure安装软件下载安装配置环境变量安装成功验证 allure运行流程allure装饰器函数基本说明装饰器函数使用allure.attach 命令行运行利用allure-pytest生成中间结果json 查看测试报告总览页面每个tab页的说明类别页面测试套图表页面时间刻度功能页面包 …...

编程日记 2025/8/2 16:15:49

一场陟遐自迩的 SwiftUI + CoreData 性能优化之旅（下）

概述自从 SwiftUI 诞生那天起，我们秃头码农们就仿佛打开了一个全新的撸码世界，再辅以 CoreData 框架的鼎力相助，打造一款持久存储支持的 App 就像探囊取物般的 Easy。话虽如此，不过 CoreData 虽好，稍不留神也可能会…...

编程日记 2025/8/2 16:15:47

java的输入输出模板(ACM模式)

文章目录 1、前置准备2、普通输入输出API①、输入API②、输出API 3、快速输入输出API①、BufferedReader②、BufferedWriter 案例题目描述代码面试有时候要acm模式，刷惯leetcode可能会手生不会acm模式，该文直接通过几个题来熟悉java的输入输出模板&…...

编程日记 2025/8/2 16:15:45

浏览器自动化与网络爬虫实战：工具对比与选型指南

浏览器自动化与网络爬虫实战：工具对比与选型指南摘要在当今数字化时代，浏览器自动化和网络爬虫技术已成为数据收集与测试的重要工具。本文深入剖析了多种主流浏览器自动化工具和爬虫框架的特点、优缺点及其适用场景，包括 Selenium、Puppe…...

编程日记 2025/8/2 16:15:44

“双非” “退伍” “材料” “学验证” 拿到Dream Offer

大家好，我是2024年路科验证V2X春季班的学员。在春季班的课上完后，觉得自己的基础大部分已经被路科给弥补了，但是很多课程中关于框架的搭建和一些细节还是不够扎实，有所欠缺，于是又重修了秋季班的课程。这两次课程给我的…...

编程日记 2025/8/2 16:15:42

python 上海新闻爬虫，上观新闻 + 腾讯新闻

1. 起因， 目的: 继续爬上海新闻， 增加新闻来源。昨天写了： 东方网澎湃新闻今天增加2个来源： 上观新闻腾讯新闻此时有4个来源，我觉得已经差不多了。 2. 先看效果 3. 过程: 代码 1, 上观新闻这里也有一个有趣的…...

编程日记 2025/8/2 16:15:40

【LUT技术专题】ECLUT代码解读

目录原文概要 1. 训练 2. 转表 3. 测试本文是对ECLUT技术的代码解读，原文解读请看ECLUT。原文概要 ECLUT通过EC模块增大网络感受野，提升超分效果，实现SRLUT的改进，主要是2个创新点： 提出了一个扩展卷积&…...

编程日记 2025/8/2 16:15:39

Wsl2 网络模式介绍

每个模式说明参考下面连接使用 WSL 访问网络应用程序 | Microsoft Learn...

编程日记 2025/8/2 16:15:37

项目高压生存指南：科学重构身体与认知系统的抗压算法

引言：压力重构的工程学思维在项目管理的高压熔炉中，优秀从业者与普通执行者的核心差异不在于抗压能力的高低，而在于是否掌握压力管理的系统化算法。本文摒弃传统的鸡汤式减压建议，从人体工程学、神经科学和认知心理学角度&#…...

编程日记 2025/8/2 16:15:35

Java设计模式之工厂方法模式：从入门到精通

1. 工厂方法模式概述 1.1 定义与核心思想工厂方法模式(Factory Method Pattern) **定义：**是一种创建型设计模式，它定义了一个用于创建对象的接口，但让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。 **核心思想：**工厂模式的核心思想是将对象的创建…...

编程日记 2025/8/2 16:15:33

生成自定义的androidjar文件具体操作

在Androidsdk目录下的platform找到对应的api的android源码包路径，如android-32拷贝里面的android.jar文件到目录，如 C:\Users\xxxxxxx\Desktop\android\new_android_jar，然后解压android.jar到目录new_android_jar下。在编译后的aosp源码中找…...

编程日记 2025/8/4 10:08:26

1. 创建目录 mkdir -p /data/mysql3307/{data,tmp,logs} # 赋权 chown -R mysql:mysql /data/mysql3307 chmod -R 750 /data/mysql3307 2.修改 /etc/my.cnf ，添加[mysqld3307]实例配置组 [mysqld3307] # MySQL服务的端口 port 3307 # 套接字文件存放路径 socket /…...

编程日记 2025/8/2 16:15:32

相机的方向和位置

如何更好的控制相机按照我们需要来更好的观察我们需要的地貌呢? 使用 // setview瞬间到达指定位置,视角//生成position是天安门的位置var position Cesium.Cartesian3.fromDegrees(116.397428,39.90923,100)viewer.camera.setView({//指定相机位置destination: position, 在…...

编程日记 2025/8/2 16:15:30

云原生架构下的微服务通信机制演进与实践

📝个人主页🌹：慌ZHANG-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言：通信机制是微服务架构的基础随着软件系统复杂度的提升，“单体架构 → 微服务架构 → 云原生架构”逐步成为企业数字化转型的演进主线。而在微服务架构中，“服务间通信机制”决定了系统的稳定性…...

编程日记 2025/8/2 16:15:28

Git标签删除脚本解析与实践：轻松管理本地与远程标签

Git 标签删除脚本解析与实践：轻松管理本地与远程标签在 Git 版本控制系统中，标签常用于标记重要的版本节点，方便追溯和管理项目的不同阶段。随着项目的推进，一些旧标签可能不再需要，此时就需要对它们进行清理。本文将通过一个完整的脚本，详细介绍如何删除本地和远程的 …...

编程日记 2025/8/2 16:15:26

5G让媒体传播更快更智能——技术赋能内容新时代

5G让媒体传播更快更智能——技术赋能内容新时代在5G时代，媒体传播已经不再是传统的“电视纸媒网站”模式，而是演变成超低延迟、高速传输、智能交互的全新生态。无论是直播、短视频、VR/AR内容还是AI驱动的个性化推荐，5G的高速连接能力都在让…...

编程日记 2025/8/2 16:15:25

数字IC前端学习笔记：锁存器的综合

相关阅读数字IC前端专栏https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 锁存器是一种时序逻辑，与寄存器相比面积更小，但它的存在会使静态时序分析(STA)变得更加复杂，因此懂得什么样的设计会综合出…...

编程日记 2025/8/2 16:15:23

Spring Boot快速开发：从零开始搭建一个企业级应用

Spring Boot快速开发：从零开始搭建一个企业级应用在当今的软件开发领域，Spring Boot已经成为构建企业级应用的首选框架之一。它不仅简化了Spring应用的初始搭建以及开发过程，还提供了许多开箱即用的功能，使得开发者能够快速地构…...

编程日记 2025/8/2 16:15:20

ATH12K驱动框架架构图

ATH12K驱动框架架构图 ATH12K驱动框架架构图（分层描述）I. 顶层架构II. 核心数据结构层次关系III. 主要模块详解1. 核心模块 (Core)2. 硬件抽象层 (HAL)3. 无线管理接口 (WMI)4. 主机目标通信 (HTC)5. 复制引擎 (CE)6. MAC层7. 数据路径 (DP)IV. 关键数据流路径1. 发送数据流 …...

编程日记 2025/8/2 16:15:19

数字信号处理|| 离散序列的基本运算

一、实验目的 （1）进一步了解离散时间序列时域的基本运算。 （2）了解MATLAB语言进行离散序列运算的常用函数,掌握离散序列运算程序的编写方法。二、实验涉及的MATLAB子函数 （1）find 功能:寻找非零元素的索…...

编程日记 2025/8/2 16:15:17

集成管理工具Gitlab

GitLab 是一个功能强大的开源代码托管和协作平台，集成 GitLab 可以显著提升团队的开发效率。下面我将为你介绍如何集成 GitLab，包括安装配置和基本使用流程。一、GitLab 安装与配置 GitLab 有多种安装方式，推荐使用官方 Omnibus 包安装&am…...

编程日记 2025/8/4 10:08:24

2025 年数维杯数学建模 C 题完整论文代码模型：清明时节雨纷纷，何处踏青不误春

《2025 年数维杯数学建模 C 题完整论文代码模型》 C题完整论文一、问题重述 1.1 问题背景 2025 年第十届数维杯大学生数学建模挑战赛 C 题，将我们带入“清明时节雨纷纷，何处踏青不误春”的诗意情境。清明节，这个处于每年 4 月 4 日至 6 …...

编程日记 2025/8/2 15:08:44

2025数维杯数学建模C题完整限量论文：清明时节雨纷纷，何处踏青不误春？

2025数维杯数学建模C题完整限量论文：清明时节雨纷纷，何处踏青不误春？ 清明节，在每年 4 月 4 日至 6 日之间，既是自然节气，也是我国重要的传统节日，承载着中华民族千年的文化记忆与情感寄托。此…...

编程日记 2025/8/2 15:08:43

POSE识别神经网络

Pose 识别模型介绍 Pose 识别是计算机视觉领域的一个重要研究方向，其目标是从图像或视频中检测出人体的关键点位置，从而估计出人体的姿态。这项技术在许多领域都有广泛的应用，如动作捕捉、人机交互、体育分析、安防监控等。 Pose 识别模型的…...

编程日记 2025/8/2 15:08:41

相关文章：