我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

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

本文测试环境:electron@1.7.9mac

问题描述

本篇文章的主角代码可以从这里下载到:

下面的命令是调试启动命令:

npm start

然后,苏南大叔通过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
npm run package:mac

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

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

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

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

重点是下面这句话,--save是重点中的重点,--save-dev/-D在默认情况下,打包之后是会丢失的。

npm install glob electron-settings --save

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

总结

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

更多苏南大叔带来的electron的精彩文章,请点击这里查看:

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

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