Electron React 应用程序白屏 + 构建中断开连接的 devtools 但开发中很好？

Posted 2023-03-22

【中文标题】Electron React 应用程序白屏 + 构建中断开连接的 devtools 但开发中很好？

【英文标题】：Electron React app white screen + disconnected devtools in build but fine in development?

【发布时间】：2021-12-01 09:16:36

【问题描述】：

当我在开发服务器 (npm start) 上运行我的应用程序时，它运行良好，在控制台中没有任何问题。

但是，当我构建我的应用程序 (npm run build && electron-builder -m) 时，我得到一个白屏并断开了 devTools。

这是我的 main.js 文件

const  app, BrowserWindow, screen  = require('electron')

let mainWindow;

function createWindow () 
  // Create the browser window.
  const  width, height  = screen.getPrimaryDisplay().workAreaSize
  const win = new BrowserWindow(
    title:"DSL viewer",
    width:1050,
    height:700,
    maxHeight:height,
    maxWidth:width,
    minHeight:700,
    minWidth:1050,
    webPreferences: 
      nodeIntegration: true,
      enableRemoteModule: true,
      devTools: true
    
  )

  win.loadURL('./index.html');
  
  win.on('closed', function () 
    mainWindow = null;
  );


// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => 
  if (process.platform !== 'darwin') 
    app.quit()
  
)

app.on('activate', () => 
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  
  if (BrowserWindow.getAllWindows().length === 0) 
    createWindow()
  
)

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

这是应用的截图

有谁知道这可能是什么原因造成的，或者我该如何调试它？

提前致谢！

【参考方案1】：

这是因为 electron 构建后无法找到 index.html。将 window.loadURL 更改为 window.loadURL(__dirname+"/index.html")。