如何在 Electron 和 CRA 的生产中使用 loadUrl 或 loadFile？

Question

我已经使用 Electron 和 Create React App 构建了一个应用程序。我在开发中在 package.json 中使用了

"proxy": "http://192.168.1.10:3000"

。然后我根据这篇文章用电子生成器生成了exe文件：medium

我的主要电子文件是：

const {app, BrowserWindow} = require('electron')
const isDev = require('electron-is-dev');
const path = require("path");
const url = require('url');

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: 'preload.js',
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
    },
    minWidth: 800,
    minHeight: 600,
  })

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

}

app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

我的应用程序构建良好，但是当我向节点服务器发送请求时，我得到：

POST file:///D:/api/auth/login net::ERR_FILE_NOT_FOUND

。我现在很困惑。如何为我的应用程序设置默认代理以向服务器请求以及从构建文件夹加载文件？

Answer 1

您应该在应用程序准备就绪时加载 URL。

const { BrowserWindow, app } = require('electron');
const path = require('path');
const { createMenu } = require('./menu');

let mainWindow;

function createMainWindow() {
  mainWindow = new BrowserWindow({
    minWidth: 1000,
    minHeight: 800,
    fullscreen: true,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: true,
    },
  });
}

  app.whenReady().then(() => {
    createMainWindow();
    if (!app.isPackaged) {
      mainWindow.webContents.openDevTools();
    }
    createMenu();

    const startUrl = app.isPackaged
      ? `file://${path.join(__dirname, '../build/index.html')}`
      : 'http://localhost:3000';

    mainWindow.loadURL(startUrl).catch((err) => {
      console.error('Failed to load URL:', startUrl, err);
    });
  });

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});