快速开启react+electron应用,搭建启动问题

注意:

  • React 本地启动在 3000端口
  • Electron 在创建 BrowserWindow 的时候,可以读取本地的文件或者是 url
  • 开发环境 读取localhost: 3000
  • 生产环境 需要加载本地成型以后的本地文件,打包的时候再考虑

一 react 脚手架 create-react-app 快速搭建 react

npx create-react-app  my-app-name
cd my-app-name
npm start

二 electron 的开发环境搭建

npm install electron --save-dev

三 环境配置

  • 新建main.js 文件(在package.json 同等目录下)
  • 打开package.json文件需要添加main.js作为入口文件
  • 在package.json中添加执行脚本
    在这里插入图片描述
  • electron-is-dev 用于判断 electron 的开发环境
    npm install electron-is-dev --save-dev

在这里插入图片描述

注:大概就是创建了一个 1024 * 680 的窗口,在开发环境下,将 http://localhost:3000
下的内容加载到electron窗口中。

三 开启 react+electron

在 package.json 文件中可以看到,要启动 react 和 electron 得执行以下两个脚本命令

在这里插入图片描述

npm start //可以看到在浏览器新打开一个监听 3000 端口的一个 tab
npm run ele // 弹出 electron 窗口

缺点:

  1. 需要跑两个命令
  2. 关掉 electron 窗口后,端口仍被占有的情况
  3. 需要 3000 端口跑起来了再刷新一下 electron 才会有内容
  4. 浏览器会打开一个 3000 端口的 tab 页, electron 会弹出加载了3000端口内容的窗口,理想状态下只需要保留 electron 中的窗口就好了

优化一:安装Concurrently
解决问题:解决以上 1和2 的问题,一次可以运行多个命令
安装:npm install concurrently --save-dev
配置:在 package.json 中的 scripts 添加一个 dev

"dev": "concurrently \" electron .\" \" npm start\""

优化二:安装 wait-on 插件
解决问题:解决 问题3 等3000端口执行完毕 再打开electron,为了不看到electron 白屏问题
安装:npm install wait-on
配置dev:

`"dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"npm start\""`

优化三:安装cross-env
解决问题:解决跨平台设置环境变量的问题。但是这次我们使用它是为了利用它的 BROWSER=none 来解决上面提到的第四个问题,不打开浏览器中的 tab 页。
安装:npm install cross-env --save-dev
配置dev:

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

四 运行项目

npm run dev 直接打开electron 窗口 没有白屏 不需要打开浏览器tab 页面。

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

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

相关文章

QT--聊天室

一、设计要求 用QT做一个聊天室, 制作一个服务器和客户端。可以进行注册、登录, 登陆成功后可以使用昵称进行发送、接收消息。 能根据昵称、聊天内容查询历史记录,也可以查询全部聊天记录。 。 二、客户端三级ui界面 三、项目代码 //在…

IDEA管理远程仓库Git

1、模拟项目 新建一个文件夹,用来这次演示 用IDEA来打开文件夹 2、创建仓库 在IDEA中给该文件夹创建本地仓库和远程仓库 在菜单栏找到VCS选择Share project on Gitee 在弹窗中输入描述信息 接下来会出现以下弹窗 点击ADD后,在gitee上会创建远程仓库 …

嵌入式开发服务器与客户端交互 日志2024/7/31

嵌入式开发服务器与客户端交互 客户端 网页 操作 请求相关代码: 这里为了适配 低版本浏览器 用的不是fetch 当然用fetch更好 var curUlr window.location.href; //获取当前网页地址var newURL curUlr.lastIndexOf("/");//截取到最后一个斜杠索引var pathUrl…

mysql 数据库空间统计sql

mysql 数据库空间统计 文章目录 mysql 数据库空间统计说明一、数据库存储代码二、查询某个数据库的所有表的 代码三、列出所有已经产生碎片的表总结 说明 INFORMATION_SCHEMA Table Reference 表参考 information_schema是‌MySQL中的一个特殊数据库,它存储了关于…

MLP多层感知机与Pytorch实现

参考文章: 1.动手学深度学习——多层感知机(原理解释代码详解)_多层感知机 代码-CSDN博客 2.4.1. 多层感知机 — 动手学深度学习 2.0.0 documentation 3.深度理解多层感知机(MLP) | 米奇妙妙屋 1. 神经网络由来 神经网…

Scrapy 爬取旅游景点相关数据(七):利用指纹实现“不重复爬取”

本期学习: 利用网页指纹去重 众所周知,代理是要花钱的,那么在爬取(测试)巨量网页的时候,就不可能对已经爬取过的网站去重复的爬,这样会消耗大量的时间,更重要的是会消耗大量的IP (金…

vite instanceof 失效

背景:给一个巨石单体项目进行标准化模块拆分,封装出来的模块代码用 vite 进行构建,但模块启动后页面上的表现一直和 webpack 那版不一致 一步步 debug 后,发现问题出在下面这个判断条件 const GeneratorFunction function* () …

【Golang 面试 - 基础题】每日 5 题(七)

✍个人博客:Pandaconda-CSDN博客 📣专栏地址:http://t.csdnimg.cn/UWz06 📚专栏简介:在这个专栏中,我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话,欢迎点赞👍收藏…

Vue 3 中使用 InMap 绘制热力图

本文由ScriptEcho平台提供技术支持 项目地址:传送门 Vue 3 中使用 InMap 绘制热力图 应用场景介绍 InMap 是一款强大的地图组件库,它提供了一系列丰富的可视化功能,包括热力图。热力图可以将数据点在地图上以颜色编码的方式可视化&#x…

微软:警惕利用VMware ESXi进行身份验证绕过攻击

微软于7月29日发布警告,称勒索软件团伙正在积极利用 VMware ESXi 身份验证绕过漏洞进行攻击。 该漏洞被追踪为 CVE-2024-37085,由微软安全研究人员 Edan Zwick、Danielle Kuznets Nohi 和 Meitar Pinto 发现,并在 6 月 25 日发布的 ESXi 8.0 …

如何学习自动化测试工具!

要学习和掌握自动化测试工具的使用方法,可以按照以下步骤进行: 一、明确学习目标 首先,需要明确你想要学习哪种自动化测试工具。自动化测试工具种类繁多,包括但不限于Selenium、Appium、JMeter、Postman、Robot Framework等&…

docker环境安装kafka/Flink/clickhouse镜像

1、安装Kafka服务 1、将一下三个tar文件复制到ubuntu指定目录下 2、进入到/home/cl/app目录,使用docker命令加载tar镜像文件 # cd /home/cl/app # docker load -i kafka.tar # docker load -i kafka-manager.tar # docker load -i kafka-zookeeper.tar3、查看d…

分布式:RocketMQ/Kafka总结(附下载链接)

文章目录 下载链接思维导图 本文总结的是关于消息队列的常见知识总结。消息队列和分布式系统息息相关,因此这里就将消息队列放到分布式中一并进行处理关联 下载链接 链接: https://pan.baidu.com/s/1hRTh7rSesikisgRUO2GBpA?pwdutgp 提取码: utgp 思维导图

web学习笔记(八十三)git

目录 1.Git的基本概念 2.gitee常用的命令 3.解决两个人操作不同文件造成的冲突 4.解决两个人操作同一个文件造成的冲突 1.Git的基本概念 git是一种管理代码的方式,广泛用于软件开发和版本管理。我们通常使用gitee(码云)来云管理代码。 …

《Linux运维总结:基于x86_64架构CPU使用docker-compose一键离线部署zookeeper 3.8.4容器版分布式集群》

总结:整理不易,如果对你有帮助,可否点赞关注一下? 更多详细内容请参考:《Linux运维篇:Linux系统运维指南》 一、部署背景 由于业务系统的特殊性,我们需要面对不同的客户部署业务系统&#xff0…

前端如何实现更换项目主题色的功能?

1、场景 有一个换主题色的功能,如下图: 切换颜色后,将对页面所有部分的色值进行重新设置,符合最新的主题色。 2、实现思路 因为色值比较灵活,可以任意选取,所以最好的实现方式是,根据设置的…

全面整理人工智能(AI)学习路线图及资源推荐

在人工智能(AI)飞速发展的今天,掌握AI技术已经成为了许多高校研究者和职场人士的必备技能。从深度学习到强化学习,从大模型训练到实际应用,AI技术的广度和深度不断拓展。作为一名AI学习者,面对浩瀚的知识海…

递归方法清空多维数组中的null元素(对象)

源码 //【递归】说明:递归方法清空多维数组中的null元素(对象) let clearNullElementsInArray (arr) > {return (arr || []).filter(v > {if (v null) {return false;} else {if (v.children) {v.children clearNullElementsInArra…

【C语言】Linux 飞翔的小鸟

【C语言】Linux 飞翔的小鸟 零、环境部署 安装Ncurses库 sudo apt-get install libncurses5-dev壹、编写代码 代码如下&#xff1a; bird.c #include<stdio.h> #include<time.h> #include<stdlib.h> #include<signal.h> #include<curses.h>…

科普文:Linux目录详解

在 Linux/Unix 操作系统中&#xff0c;一切都是文件&#xff0c;甚至目录也是文件&#xff0c;文件是文件&#xff0c;鼠标、键盘、打印机等设备也是文件。 这篇文章&#xff0c;我们将一起学习 Linux 中的目录结构及文件。 Linux 的文件类型 Linux系统中的文件系统&#xf…