【Electron-vue】构建桌面应用（32）- macOS系统中出现白屏

Electron-vue在macOS系统白屏问题及解决
最新推荐文章于 2025-05-08 16:21:21 发布
原创 最新推荐文章于 2025-05-08 16:21:21 发布 · 968 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#macOS白屏 #ant-design-vue #组件兼容

由于项目一直使用的是elecctron-vue，而且自2015年后，项目就不再维护了，导致项目中引用的electron和vue版本都相对的低，升级的话会出现其他的问题，所以一直都没有做版本的升级处理。

最近在做macOS支持的时候就发现，莫名其妙的出现白屏的问题，前端UI组件选择的是antdv。在数字输入框a-input-number以及a-icon的时候，渲染会出现白屏的问题。

a-input-number在focus的时候或者在hover的时候会导致白屏

<a-input-number
  @change="changePort"
  v-model="loginVo.port"<
最低0.47元/天 解锁文章
Electron打包的桌面应用程序，运行中程序黑屏、白屏等渲染进程崩溃问题解决
青清一水澈
03-17 1万+
Electron打包的桌面应用程序，运行中程序黑屏、白屏等渲染进程崩溃问题解决
vue页面白屏的原因及优化
热门推荐
nick_zhang的博客
10-18 1万+
一、原因： 单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js vendor.js)，所以当网速差的时候会产生一定程度的白屏 二、解决办法： （1）优化 webpack 减少模块打包体积，code-split 按需加载 （2）服务端渲染，在服务端事先拼装好首页所需的 html （3）首页加 loading 或 骨架屏 （仅仅是优化体验） （4）缓存一定要使用，但是请注意合理使用 （5）代码压缩，服务端压缩，浏览器端解压缩 三、HTTP压缩的过程 浏览器发送Http r
Electron-Vue学习篇—1、electron-vue项目打包后打开新窗口空白
Code P的博客
08-31 2271
一、场景描述 在本地运行electron-vue项目时，打开新窗口有显示内容，但经过打包之后，重复同样的操作，新窗口空白，打开Developer Tools，提示"DevTools was disconnected from the page" 二、解决思路 出现"DevTools was disconnected from the page"的提示，说明该页面没有被找到，那就是页面的路径配置错误 1、查看路由配置，采用的是hash模式，这没问题 const router = new VueRouter({
electron+vue本地运行正常,打包后白屏
风花一世月
07-04 539
一般是配置问题 查询路由是否添加*条件 { path: '/:pathMatch(.*)', redirect: '/' },
手摸手 撸一个 vue3.0 history 模式配合 nginx 多 location 配置
ZhaoQM_script的博客
06-16 2151
vue router 有 Hash, HTML5 不同的历史模式 官方文档: hash 模式是用 createWebHashHistory() 创建的 import { createRouter, createWebHashHistory } from 'vue-router' const router = createRouter({ history: createWebHashHistory(), routes: [ //... ], }) 它在内部传递的实际 URL 之前
electron将vue项目打包成exe桌面应用流程及可能出现的问题
Z.Dragon 的博客
11-13 2591
近期项目需求，把网页（基于vue）打包成exe桌面应用，在网上找到了electron； 这里说说我对electron-builder的使用心得 electron打包exe程序主要有两种方法： 1、electron-packager：初学者入门demo传送门 2、electron-builder：稍微复杂一丢丢，需要配置文件 ####### 先将vue项目打包 npm run build 得到dis...
Electron 打包与发布指南：让你的应用运行在 Windows、macOS、Linux
2501_91537388的博客
05-08 2967
步骤内容准备安装 Electron + electron-builder配置添加build字段打包生成可执行文件发布上传 GitHub / 服务器 / 应用商店更新使用自动更新安全平台签名，确保可信任和合规性。
【electron】 vite + electron-builder 打包配置
小王的技术库
10-17 1552
它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
vue3安装electron-builder并打包成app
06-06
我们正在处理一个关于在Vue3项目中安装electron-builder并打包成桌面应用的问题。根据提供的引用，我们得知：-引用[1]提到可以使用npm安装electron-builder：`npminstallelectron-builder--save-dev`-引用[2]提到在...
Electron-Vue打包应用出现白屏的问题——更正
chenqk_123的专栏
09-09 5763
上次碰到白屏的问题，使用的是package命令去执行后出现的。然后换成build命令去执行，发现执行exe文件不会出现白屏的，程序正常。但是结合业务发现，build之后在build目录下存在一个unpackage的项目，意思就是未打包，而且打包之后的程序应该是双击即可打开的文件，而不是需要安装的文件，安装的话会产生对应的安装包，而package应该是在安装程序之后的，也就是先安装之后才会有package的文件。 这么一梳理发现，现在要做的打包，应该是package而不是build，应该先把程序packa
electorn 白屏解决方案（偶发性白屏）
qq_39040148的博客
11-23 3987
electorn 白屏解决方案（偶发性白屏）
记Mac运行Electron项目一片空白问题[electron、vuecli2、webpack、blank]
蓝色黄梅天的博客
12-13 1813
Mac electron npm run dev 白屏
解决Electron应用中的白屏问题的实用方法
SailingCoder的博客
12-19 6799
在使用Electron构建应用程序时，一些开发者可能会面临窗口加载过程中出现的白屏问题。针对这两个问题，提供了两种实用的解决方法。
Ant Design Vue Pro 动态路由加载，服务器重启首页白屏
小杨很困的博客
03-01 5537
刚接手的一个项目，将静态路由改为动态路由，使用的是Ant Design Vue Pro框架。其中遇到了点问题纪录一下。
electron-vue升级electron到最新的版本后启动不起来，窗口一闪而过。
csx blog
08-17 977
升级electron到最新的版本后启动不起来，窗口一闪而过。
Mac下electron之点击左上角关闭按钮隐藏，再次打开不重新加载窗口
sinco25的博客
07-27 1655
本文出处https//blog.csdn.net/qq_33040483/article/details/103026442。
electron白屏方案，已成功
陌子曦的专栏
11-25 5987
白屏解决
electron-vue 黑屏/白屏 devTools was disconnected from the pageonce page is reloaded devtools will automa
YaRuu的博客
06-30 6330
electron版本回退 这个问题定位是V8崩溃，DevTools 将显示以下信息 DevTools was disconnected from the page.（DevTools 与页面断开连接） Once page is reloaded, DevTools will automatically reconnect.（页面重新载入后，DevTools 将自动重新连接）...
electron生产环境窗口白屏或闪一下消失问题
Chaoggo的博客
07-20 1501
electron生产环境窗口白屏或闪一下消失问题
将若以系统的vue3版本项目转Electron桌面应用
最新发布
08-19
我们正在将Vue3项目转换为Electron桌面应用。Electron允许我们使用Web技术构建跨平台桌面应用，它由Node.js和Chromium组成。Vue3作为前端框架，可以很好地集成到Electron中。 步骤概述： 1. 初始化Electron环境：...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值