Electron Builder打包Mac应用启动白屏问题求助

1. 修正页面加载的路径问题 #

开发环境下用相对路径加载HTML可能正常，但Mac打包后的应用目录结构和开发环境不同，必须用绝对路径确保资源能被找到。调整app.js中的窗口加载代码：

// 错误写法：打包后可能找不到文件
mainWindow.loadFile('./index.html')

// 正确写法：用path模块拼接绝对路径
const path = require('path')
mainWindow.loadFile(path.join(__dirname, 'index.html'))

如果你的HTML文件在src这类子目录下，要对应调整路径，比如path.join(__dirname, '../src/index.html')，注意打包后主进程文件会放在Contents/Resources/app目录下。

2. 确保资源被完整打包到应用 #

检查package.json的build配置，保证所有静态资源（HTML、CSS、JS、图片等）都被包含进安装包：

"build": {
  "appId": "com.yourcompany.collab",
  "mac": {
    "target": "dmg",
    "icon": "icons/mac/icon.icns"
  },
  "files": [
    "**/*", // 包含所有必要文件
    "!node_modules/**/*.log", // 排除不必要的冗余文件
    "!src/**/*.map"
  ],
  "extraResources": [
    "./static/**/*" // 额外静态资源目录需单独声明
  ]
}

如果资源没被正确打包，页面加载时会因找不到文件出现白屏。

3. 禁用Mac沙箱模式（测试阶段） #

Mac打包后默认启用沙箱，可能限制了页面资源加载。在app.js的窗口配置中添加sandbox: false：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true, // 根据你的功能需求调整
    contextIsolation: false, // 若用到Node API需对应设置
    sandbox: false // 临时禁用沙箱排查问题
  }
})

注：如果要上架Mac App Store，沙箱需要重新启用，这一步仅用于定位问题。

4. 查看打包后的控制台错误 #

启动打包后的应用，通过菜单栏View -> Toggle Developer Tools打开开发者工具（如果应用配置了菜单），或者在app.js中临时添加自动打开工具的代码：

mainWindow.webContents.openDevTools()

查看控制台的404错误、JS语法报错等，能快速定位资源加载失败的具体原因。

5. 清理构建缓存后重新打包 #

Electron Builder的缓存可能导致异常，清理后再构建：

rm -rf node_modules/.cache/electron-builder
rm -rf dist/
npm run build

6. 检查method.js中的资源引用 #

如果method.js里有加载本地资源的逻辑，同样要用path模块拼接绝对路径，避免相对路径在打包后失效。

内容的提问来源于stack exchange，提问作者Rahul Baraiya