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

由于项目一直使用的是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"
  placeholder="端口"
/>

现象如下

如果将a-input-number改为a-input则没有任何问题，在网上也没有搜到对应的解决方案，我尝试过如果是html原生的input-number输入框，则没有任何问题。

<input type="number"/>

a-icon也会导致这种问题。

我本来的处理流程是在登陆页面使用v-if做了一个隐藏的提示，当登陆出错的时候显示具体的错误。但当从隐藏切换到显示状态时也会出现白屏的问题。导致程序用不了，但是有时会隔一段时间就会恢复正常，但是有时不能。

将a-icon代码注释掉，发现在来回切换显示/隐藏的时候，就不会出现白屏的情况。

考虑到这可能的原因就有以下几种原因：

1. electron-vue的版本过低，导致部分ant-design-vue组件无法兼容或者适配。
2. 因为这种情况只在macOS系统中出现，所以也会考虑到跟系统有关。但是你又不能去修改系统的一些设置。所以只能更换组件，或者使用其他的方式处理。

上面的两种情况还是修改组件来的靠谱一点。但是整体的UI框架使用的都是andv，所以为了这个问题更换整个UI框架就有点得不偿失了。

最优的解决办法就是将a-input-number改为a-input并且更换a-icon组件或者不用这个组件。

我估计在antv组件中也会有其他的组件导致白屏的问题，目前只能通过尝试避免不适合的组件。如果出现同样的问题，可以通过逐个排除注释的方式去定位具体导致这种问题的组件，然后放弃使用它。

还有个问题就是，在选择前端框架的时候一定要选择那种长期更新的，并且拥有丰富的论坛的，否则你出现问题都无从查询和入手解决。

记录一下问题，以后有新的解决办法再更新！