带有reactJs的电子vite，构建问题，在构建我的应用程序时在集成我的api时显示白屏idk

Question

,

我正在尝试创建一个VPN应用程序，在其中我从API获取服务器，我使用reactJS作为我的渲染器进程，它在开发中工作得很好，但是当我构建它时，它向我显示白屏。
这是我的 electro-builder.yml 代码，

appId: com.9D-VPN.app
productName: 9D-VPN
directories:
  buildResources: build
files:
  - '!**/.vscode/*'
  - '!src/*'
  - '!electron.vite.config.{js,ts,mjs,cjs}'
  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
asarUnpack:
  - resources/**
win:
  executableName: 9D-VPN
  icon: 'resources/icon.png'
nsis:
  artifactName: ${name}-${version}.${ext}
  shortcutName: ${productName}
  uninstallDisplayName: ${productName}
  createDesktopShortcut: always
mac:
  entitlementsInherit: build/entitlements.mac.plist
  extendInfo:
    - NSCameraUsageDescription: Application requests access to the device's camera.
    - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
    - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
    - NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
  notarize: false
dmg:
  artifactName: ${name}-${version}.${ext}
linux:
  target:
    - AppImage
    - snap
    - deb
  maintainer: 9dvpn.io
  category: Utility
appImage:
  artifactName: ${name}-${version}.${ext}
npmRebuild: false
publish:
  provider: generic
  url: https://example.com/auto-updates

这是我的 main.js 和 app.js 代码：

function App() {
  return (
    <Router>
      <ModalProvider>
        <ServersProvider>
          <Routes>
            <Route path="/" element={<AppRoutes />} />
            <Route path="/profile" element={<Profile />} />
            <Route path="/setting" element={<Setting />} />
            <Route path="/feedback" element={<FeedBack />} />
            <Route path="/help" element={<Help />} />
            <Route path="/suggestion" element={<Suggestion />} />
            <Route path="/sign-in" element={<SignIn />} />
            <Route path="/sign-up" element={<SignUp />} />
            <Route path="/forget-password" element={<Forget />} />
          </Routes>
          <PricingModal />
        </ServersProvider>
      </ModalProvider>
    </Router>
  )
}

const AppRoutes = () => {
  const { loading, servers } = useServers()

  return loading ? <Splash /> : <Home servers={servers} />
}

export default App

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    minWidth: 1000,
    minHeight: 800,
    maxWidth: 1000,
    maxHeight: 800,
    show: false,
    autoHideMenuBar: true,
    frame: true,
    icon: join(__dirname, '../renderer/src/assets/9dicon.ico'),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
      contextIsolation: true,
      nodeIntegration: false
    }
  })

  mainWindow.webContents.openDevTools() // Optionally open the DevTools console

  mainWindow.on('ready-to-show', () => {
    mainWindow.show()
    showOnboardingNotification() // Show notification when window is ready
  })

  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'])
  } else {
    mainWindow.loadFile(join(__dirname, '../../out/renderer/index.html'))
  }
}

function showOnboardingNotification() {
  // Ensure to have a notification icon for better UX
  const notificationIcon = join(__dirname, '../renderer/src/assets/notificationIcon.png')
  const notification = new Notification({
    title: 'Welcome to 9D VPN',
    body: 'Thank you for installing. Let’s get started!',
    icon: notificationIcon
  })

  notification.show()
}

app.whenReady().then(() => {
  electronApp.setAppUserModelId('com.electron') // Make sure to replace 'com.electron' with your actual app ID
  app.on('browser-window-created', (_, window) => optimizer.watchWindowShortcuts(window))
  ipcMain.on('ping', () => console.log('pong'))
  createWindow()
})

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

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

我不知道该尝试什么，因为我是电子方面的初学者。

Answer 1

根据电子文档，

mainWindow.loadFile

应该传递一个相对路径，而不是绝对路径。您正在传递

join(__dirname, '../../out/renderer/index.html')

，它将解析为绝对路径。

来自 https://www.electronjs.org/docs/latest/api/browser-window#winloadfilefilepath-options：

filePath 应该是相对于应用程序根目录的 HTML 文件的路径。请参阅 webContents 文档以获取更多信息。

尝试仅通过

'../../out/renderer/index.html'

或

'./out/renderer/index.html'

。