如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

electron官方有个electron-api-demo的例子,是个学习electron的好帮手。从github上拉取到对应的代码后,我们可以成功的start这个项目。但是,我们试图构建这个项目到可执行文件后,却会遇到白屏等问题。那么,苏南大叔在本篇文章中,将要讲述如何处理解决这个问题。

问题描述

本篇文章的主角代码可以从这里下载到:https://github.com/electron/electron-api-demos 。下图是start到的界面截图。

npm start

如何解决electron-api-demo的打包白屏问题 - 000
如何解决electron-api-demo的打包白屏问题(图5-1)

然后,我们通过package.json里面定义好的打包命令,进行打包。您可以根据您的实际情况,选择打包win还是mac。

npm run package:mac
npm run package:win

然后,我们执行得到的可执行文件的时候,你就可能会看到这样的错误提示,提示缺少glob模块。

如何解决electron-api-demo的打包白屏问题 - 010
如何解决electron-api-demo的打包白屏问题(图5-2)

解决了这个问题后,我们还可能碰到下面的错误提示。

如何解决electron-api-demo的打包白屏问题 - 017
如何解决electron-api-demo的打包白屏问题(图5-3)

解决方案

npm install glob electron-settings --save
yarn
npm run package:mac

同时,考虑到electron的版本问题(参见 https://newsn.net/say/electron-packager-control-version.html ),我们还可以直接修改package.json文件,然后再执行yarn和packager。修改的地方,如下图所示。

如何解决electron-api-demo的打包白屏问题 - 021
如何解决electron-api-demo的打包白屏问题(图5-4)

这样处理过的package的安装包,就可以顺利使用了。而不会白屏,或者提示缺少模块了。

如何解决electron-api-demo的打包白屏问题 - 019
如何解决electron-api-demo的打包白屏问题(图5-5)

重点是下面这句话

npm install glob electron-settings --save

经过实践,用yarn安装globelectron-settings的话,可能是不能解决问题的。还是换成最正统的npm吧。

总结

白屏问题,在electron开发的过程中,比较常见。如果排除掉写的代码错误后,一般可以定位为node_modules文件内的问题。可以删除掉这个文件夹内的内容,然后重新yarn。看看是否正常。或者利用devtools,来查找缺失的模块,再利用npm安装对应模块到项目根目录,然后再重新打包。

更多苏南大叔带来的electron的精彩文章,请点击这里查看。https://newsn.net/tag/electron/

 【electron】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!