reactjs - 成功的电子构建导致白屏

Question

嗨，我有一个反应电子应用程序，我可以从“纱线启动”开始。但是，当我尝试使用以下命令构建时，GU​​I 显示为白色。

npx electron-builder --mac --x64 --dir

在此命令之后，我看到此消息：

heinrich-2:example lap$ npx electron-builder --mac --x64 --dir
  • electron-builder  version=22.10.5 os=16.6.0
  • loaded configuration  file=package.json ("build" field)
  • description is missed in the package.json  appPackageFile=/Users/lap/projects/example/github/tutorial/package.json
  • writing effective config  file=dist/builder-effective-config.yaml
  • skipped dependencies rebuild  reason=npmRebuild is set to false
  • packaging       platform=darwin arch=x64 electron=12.0.7 appOutDir=dist/mac
  • Unpacking electron zip  zipPath=undefined
  • default Electron icon is used  reason=application icon is not set
  • skipped macOS application code signing  reason=cannot find valid "Developer ID Application" identity or custom non-Apple code signing certificate, see https://electron.build/code-signing allIdentities=
                                                1) 4FA6C0C16A0AA845219DD4F0E89A513A5F12E919 "com.apple.idms.appleid.prd.65537843495562306b4a652b432f5852702f423033773d3d" (CSSMERR_TP_CERT_EXPIRED)
                                                2) A9D31...
                                                3) FD96

尽管屏幕是白色的，但似乎代码正在执行，因为控制台日志正在调试窗口上打印。

我怀疑问题来自加载未正确完成的 html。

main.tsx 和 package.json 的代码如下所示：

主要的.tsx

 const createWindow = () => {
    mainWindow = new BrowserWindow({
    width: 770,
    height: 1300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      // webSecurity: false
    },
  });

  //open dev tool
  mainWindow.webContents.openDevTools({ mode: 'detach' });

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `../public/index.html`),
      protocol: "file:",
      slashes: true
    })
  );

包.json

{
  "name": "example",
  "version": "0.1.0",
  "main": "build/main.js",
  "scripts": {
    "start": "tsc && electron ."
  },
  "build": {
    "extends": null,
    "appId": "com.example.test",
    "productName": "test",
    "npmRebuild": false,
    "files": [
      "build/main.js",
      "dist/**/*",
      "build/**/*",
      "public/**/*",
      "src/images/**/*",
      "win_bin/**/*"    ]
  },

更新

标签： reactjselectronelectron-builderelectron-packager