Electron踩坑指南,遭遇白屏无报错问题解析

最近组内老大交给我一个任务，希望开发一个桌面端的接口管理软件，这个项目只是一个想法，让我去开开路，早些时候学习就想试试开发一个自己的桌面端，兴致勃勃的打开Electron，发现窗口白屏+无报错+调试困难，整的一头雾水。

使用Electron一般会遇到的第一个问题就是资源下载报错，Electron，Electron bulider 需要下载很多外国远程的文件，不使用梯子的话基本百分百报错，使用了也不好使（比如我的垃圾机场），也有可能是由于网络问题、资源路径错误或者 Electron 的配置问题导致，最省心的方法还是自己下，尝试手动下载资源到 Electron 的缓存目录。Electron 使用 electron-builder 进行打包时，会有一个缓存目录。可以将资源文件手动放置到该目录下。例如，缓存目录路径通常为：~/.cache/electron-builder，将资源文件放置到该目录后，可以在 Electron 应用中通过路径访问这些资源

另一个问题就是白屏+无报错的问题，因为Electron可以无缝衔接前端代码，我直接把前端dia代码导入进去，发现在网页上也没错，但是点开软件就不行，啥也看不见，ai给的分析很多，有配置不对的，有js加载失败的，各种都有，我自己分析了一下，发现很多文件都缺失了，启动完了，根本就没有这些文件，顺着找下去原来是：Electron路由部分无法使用懒加载模式。

在现代前端开发中，懒加载是一种常见的优化技术，它可以帮助减少应用的初始加载时间，优化用户体验。然而，在 Electron 项目中，开发者可能会发现路由部分无法使用懒加载模式，导致页面一片空白，而控制台却没有报错信息。

出现这种问题的原因可能与 Electron 的运行机制有关。Electron 是一个基于 Chromium 和 Node.js 的框架，它允许开发者使用 Web 技术开发桌面应用。在 Electron 中，主进程和渲染进程是分离的，而路由懒加载通常是基于 Webpack 的动态导入功能实现的。当我们在 Electron 的渲染进程中使用懒加载时，可能会因为以下原因导致页面空白：

1. 路径问题：Electron 的文件路径与浏览器环境有所不同。在浏览器中，路径通常是基于服务器的根目录，而在 Electron 中，路径是基于本地文件系统。如果懒加载的路由模块路径不正确，Webpack 无法正确加载模块，从而导致页面空白。
2. 打包配置问题：Electron 的打包配置可能与 Webpack 的懒加载配置不兼容。例如，如果打包工具没有正确处理动态导入的模块，可能会导致模块无法被正确加载。
3. Electron 的安全限制：Electron 为了安全起见，对某些功能进行了限制。例如，它可能会限制对本地文件系统的访问，或者对动态加载的脚本进行限制。如果懒加载的路由模块触发了这些安全限制，可能会导致加载失败。

要解决这个问题，可以尝试以下方法：

1. 检查路径：确保懒加载模块的路径是正确的。在 Electron 中，建议使用绝对路径或者基于 __dirname 的相对路径。例如：
2. 优化打包配置：检查 Webpack 的配置，确保它能够正确处理动态导入。可以使用 html-webpack-plugin 和 mini-css-extract-plugin 等插件来优化打包过程。同时，确保 output 配置中的 publicPath 是正确的，例如：

output: {
  path: path.resolve(__dirname, 'dist'),
  publicPath: '/',
  filename: '.bundle.js'
}

3. 调整 Electron 配置：如果问题与 Electron 的安全限制有关，可以通过调整 Electron 的配置来解决。例如，可以使用 webPreferences 的 nodeIntegration 和 contextIsolation 属性来调整安全限制：

mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }
});

最后想要吐槽的是Electron好重的感觉，启动不起来，我第一次用Electron项目纯纯白板一样没加什么东西进去都很慢，占用也很离谱，搜罗得知：Niva 是一个跨平台（支持 Windows 和 MacOS）的桌面应用开发框架，使用前端技术开发，可用于构建轻量级的桌面应用。它基于系统 Webview 而非 Chromium，体积仅为 3MB ~ 4MB，不需要 Node.js 环境，直接提供系统 API 进行操作，感觉非常不错，可以放心食用吗？