Electron打包React应用空白的问题

Electron的真的是够折腾的,用React写个APP,dev的时候看起来挺正常的,打包出来一片空白。

打开调试工具看了一下,发现是加载不到页面。于是把asar包拖出来解压看了一下,发现页面加载路径似乎不太对,在main.js里面调整一下:

mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${__dirname}/../build/index.html`);

顺便调整一下打包目录,目前Electron Forge是把整个项目目录都打包进去了,在forge.config.js里面:

packagerConfig: {
  ...
  "dir": "./build",
  ...
},

好了,页面倒是可以加载出来了,发现js路径不对,遗漏了一个很重要的地方。React默认使用了绝对路径,所有的引用都是相对于根目录的,所以还要改下package.json里面的配置,在根下指定:…

Electron在macOS上打包windows exe文件

试着玩一下Electron,在macOS 12/13上打包exe文件时,踩了好几个坑,做个记录。

打包工具使用的是Electron快速入门教程里面推荐的 Electron Forge,在macOS上打包exe文件,需要依赖几个工具:wine、mono、xquartz,分别安装。然后执行打包命令,发现会卡在这个地方:

We need to package your application before we can make it
√ Preparing to Package Application for arch: x64
√ Compiling Application
√ Preparing native dependencies
√ Packaging Application
Making for the following targets:
× Making for target: squirrel - On platform: win32 - For arch: x64