解决 Electron + React 白屏

RGBBB

已于 2022-07-02 11:41:29 修改

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：各种Debug Web Server 文章标签： react.js electron javascript

于 2021-12-23 20:19:58 首次发布

本文链接：https://blog.youkuaiyun.com/RGBBB/article/details/122115111

问题

今天尝试用Electron+React开发一个简单的本地应用的界面, 按照教程搭建脚手架之后, 在浏览器中可以在http://localhost:3000/正常访问React。

而按理说在main.js文件里可以通过如下方法使Electron打开React运行的网址。

mainWindow.loadURL("http://localhost:3000");

然而Electron界面一直是白屏:

Electron控制台中输出:

<html lang="en"><head>
    <meta charset="utf-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#000000">

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

RGBBB

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Electron+React 执行时Electron窗口白屏

WanBaiCheng的博客

10-13

540

可能是因为App Component使用了React.StrictMode Componnet包裹去掉就能显示修改前 ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); 修改后 ReactDOM.render(<App />, document.getElementById('root')

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

qq_21087199的博客

07-29

1260

但是这次我们使用它是为了利用它的 BROWSER=none 来解决上面提到的第四个问题，不打开浏览器中的 tab 页。注：大概就是创建了一个 1024 * 680 的窗口，在开发环境下，将 http://localhost:3000。解决问题：解决问题3 等3000端口执行完毕再打开electron，为了不看到electron 白屏问题。npm start //可以看到在浏览器新打开一个监听 3000 端口的一个 tab。配置：在 package.json 中的 scripts 添加一个 dev。

2 条评论您还未登录，请先登录后发表或查看评论

electron 启动白屏--但是没有报错信息的问题解决

qq_39016177的博客

09-02

1048

electron 启动白屏--但是没有报错信息的问题解决

Electron桌面应用下，在拍照、展示pdf等模块时，容易导致应用白屏

最新发布

xiaobangsky的专栏

06-03

443

客户端白屏内存释放

react加electron打包后白屏问题解决

小猴子喝牛奶的博客

11-21

1785

react加electron打包后白屏问题解决问题发生过程描述解决方法问题发生过程描述先打包react 再打包electron 正如标题…白屏解决方法发现是引入react-router后导致，将BrowserRouter修改为HashRouter

解决Electron应用中的白屏问题的实用方法

SailingCoder的博客

12-19

6435

在使用Electron构建应用程序时，一些开发者可能会面临窗口加载过程中出现的白屏问题。针对这两个问题，提供了两种实用的解决方法。

electron白屏方案，已成功

陌子曦的专栏

11-25

5844

白屏解决

Electron打包React构建桌面应用

Leonban的博客

12-13

2013

首先需要了解下Electron，用Electron开发应用程序就像构建一个带有网页界面的Node.js应用程序。同样使用package.json文件作为主入口，主脚本指定了运行主进程的 Electron应用程序的入口，这里是main.js 文件。如果没有添加，Electron 将尝试加载包含在package.json文件目录中的index.js文件。（2）配置运行命令，使用"electron-start": "electron ."。2、打包 electron使用electron-packager依赖。

【项目】React+Electron 云笔记

Shizukuu的博客

06-19

691

0618 出现的问题 electron . 要有空格 const { app, BrowserWindow } = require(‘electron’); mainWindow.loadURL(urlLocation) URL 大写自己的css覆盖Bootstrap（把自己的引用放后面）写grid的时候记得className="row" 全局需求原生菜单，通过菜单和快捷键可以新建，保存，搜索文件持久化数据，保存文件在本地文件系统 React：搜索框、文件列表、新建文件、文件Tabs、编辑器

electron应用启动后出现白屏，移动窗口大小后恢复

愿天下没有bug

06-01

5472

有个项目使用的是electron+vue的开发方式，由于渲染进程加载过慢，所以启动时是先弹窗Loading页面提示正在加载中，待加载完成后在mounted()中发送指令到主进程来进行以下操作 1、关闭Loading进程 2、显示主渲染进程窗口之后发现这样会使主页面显示之后偶发出现空白，或者页面卡住不动的情况

electron打包后运行出现白屏并“需要使用新应用以打开此app链接”

黔肆的博客

05-17

1873

electron打包之后应用无法正常显示主页，弹出“需要使用新应用以打开....”,出现该情况的原因与BrowserWindow的一项设置有关。

electron启动出现短暂的白屏

ASP.NET

08-28

621

mainWindow = new BrowserWindow({ height: 600, width: 960, frame: false, minWidth: 710, minHeight: 500, offscreen: true, webPreferences: {webSecurity: false}, resizable: true, skipTaskbar: false, flashFrame: true, ..

vue-cli3+electron出现白屏现象

任磊

04-07

2382

近期使用electron+vue-cli3.0开发了一个跨平台项目，进行登录后路由跳转出现白屏现象，原因在于路由使用了history模式。history模式在electron环境中会出现，路由跳转的白屏现象。因此，需要将histroy模式修改成为hash模式即可解决这个问题。 ...

electron创建窗口时出现2秒的白屏怎么办

qq_42931285的博客

09-03

626

electron创建新窗口

electron启动白屏时间过长优化方案

夜空孤狼啸的博客

03-29

3209

按需加载窗口先创建后隐藏，初始化后再展示 web性能优化优化主进程

electron部分电脑白屏问题

u013896513的博客

12-08

846

GPU加速渲染意味着使用GPU用于合成。这也就意味着帧必须从GPU拷贝过来，从而需求更多的资源，因此这会比软件输出设备更慢。这种模式的优点是支持WebGL和3D CSS动画，but很多老旧电脑GPU硬件不给力，因此需要禁用掉GPU和硬件加速，使用软件输出设备在 CPU 中渲染，帧生成的速度要快得多，此模式优先于 GPU 加速模式。

React + Electron 搭建桌面应用解决打包后.exe空白问题

P_的博客

10-02

4260

1.创建React项目 # 确保已安装 Node # 安装 create-react-app 命令,如果已将安装请忽略 npm install -g create-react-app # 创建 knownsec-fed 项目 create-react-app knownsec-fed # 启动项目( create-react-app 真的超级方便啊) cd knownsec-fed &am...