我对Electron完全陌生，目前正在开发一个应用程序（使用Electron-Vite + React），并遇到了与将本地资源（特别是名为video.html的文件）加载到二级BrowserWindow相关的问题。虽然我可以使用Electron的loadURL函数加载index.html文件而没有任何问题，但当尝试加载video.html时，我总是面临“无法加载本地资源”错误。
该应用程序在使用npm run dev的开发环境中运行良好，但当我使用npm start预览产品时，第二个BrowserWindow向我抛出错误。

这里是我的index.js主进程文件

//index.js

import { app, shell, BrowserWindow, ipcMain } from 'electron'
import { join } from 'path'
import { electronApp, optimizer, is } from '@electron-toolkit/utils'

let mainWindow, secondWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 900,
    height: 670,
    show: false,
    autoHideMenuBar: true,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
      contextIsolation: true,
      enableRemoteModule: false,
      webSecurity: true
    }
  })

  mainWindow.on('ready-to-show', () => {
    mainWindow.show()
  })

  mainWindow.webContents.setWindowOpenHandler((details) => {
    shell.openExternal(details.url)
    return { action: 'deny' }
  })

  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(`${process.env['ELECTRON_RENDERER_URL']}/index.html`)
  } else {
    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
  }
}

function createSecondWindow() {
  secondWindow = new BrowserWindow({
    width: 1080,
    height: 720,
    autoHideMenuBar: true,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
      contextIsolation: true,
      enableRemoteModule: false,
      webSecurity: true
    }
  })

  secondWindow.on("ready-to-show", () => {
    secondWindow.show();
  });

  secondWindow.webContents.setWindowOpenHandler((details) => {
    shell.openExternal(details.url)
    return { action: 'deny' }
  })

  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    secondWindow.loadURL(`${process.env['ELECTRON_RENDERER_URL']}/video.html`)
  } else {
    secondWindow.loadFile(join(__dirname, '../renderer/video.html'));
  }
}

app.whenReady().then(() => {
  electronApp.setAppUserModelId('com.electron')

  app.on('browser-window-created', (_, window) => {
    optimizer.watchWindowShortcuts(window)
  })

  createWindow()
  createSecondWindow()

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

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

ipcMain.on("play-video", (event, videoPath) => {
  if (secondWindow) {
    secondWindow.webContents.send("start-video", videoPath);
  }
})

字符串

Electron.vite.config.js

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [react()]
  },
})

型

我的申请结构如下：

├── build
├── out
└─┬ src
  ├── preload
  ├─┬ main
  │ └── index.js
  ├─┬ renderer
  │ ├── index.html
  │ ├── video.html
  │ ├── public
  │ └─┬ src
  │   ├── App.jsx (React component used in main.jsx)
  │   ├── VideoApp.jsx (React component used in video.jsx)
  │   ├── main.jsx (src for index.html)
  │   └── video.jsx (src for video.html)
  ├── electron.vite.config.js
  └── package.json

型
有人可以指导我如何加载video.html到浏览器窗口，而不会遇到这个“无法加载本地资源”错误？

我尝试过的：

1.使用loadFile和loadURL：我尝试使用Electron的loadFile和loadURL方法直接将文件加载到窗口中。然而，两种方法都导致了相同的错误。
1.调整安全设置：我确保我的Electron安全设置（webSecurity等）配置正确，但仍然遇到同样的问题。