Electron-vite预览显示空白屏问题求助

问题情况 #

• 基于electron-vite创建React项目，构建过程提示成功，但执行electron-vite preview时窗口显示空白屏
• 把构建生成的out文件夹内的渲染进程文件（index.html、assets资源等）复制到普通Vite React项目中，执行vite preview可以正常显示页面，但electron-vite的preview功能仍无法正常工作
• 相关截图说明：
  • electron-vite preview时的DevTools资源面板：显示该预览模式下DevTools中资源的加载情况
  • 普通Vite React preview时的DevTools资源面板：显示正常预览状态下的资源加载情况
  • electron主进程main.js的loadFile代码片段：展示主进程中用于加载页面的loadFile相关代码

排查与解决步骤 #

• 检查主进程文件加载路径
  从主进程代码来看，loadFile的路径可能指向错误。尝试修改为绝对路径，同时区分打包前后的路径：

  const filePath = app.isPackaged 
    ? path.join(__dirname, 'index.html') 
    : path.join(__dirname, '../out/index.html')
  mainWindow.loadFile(filePath)
  

• 确认electron-vite构建输出配置
  打开electron.vite.config.js，检查渲染进程的输出目录是否和主进程加载路径匹配：

  export default defineConfig({
    renderer: {
      build: {
        outDir: '../out' // 确保输出目录与主进程加载路径对应
      }
    }
  })
  

• 修正资源加载基础路径
  在渲染进程的Vite配置中设置base: './'，确保资源以相对路径加载，避免本地加载时路径错误：

  export default defineConfig({
    renderer: {
      base: './',
      // 其他配置项
    }
  })
  

• 查看DevTools控制台错误
  打开electron窗口的DevTools（快捷键Ctrl+Shift+I），检查控制台是否有资源加载失败、语法错误等信息，直接定位具体问题。

内容的提问来源于stack exchange，提问作者Elias Nunes