Electron-Forge搭配SvelteKit打包后白屏问题求助

核心问题诊断 #

开发正常但打包后白屏，主要源于生产环境资源路径配置错误、SvelteKit静态适配逻辑不匹配，以及Electron加载逻辑冲突。以下是针对性修复步骤：

1. 修正Electron生产环境资源加载路径 #

你的electron.cjs中，electron-serve的目录指向错误，同时加载逻辑存在冗余判断，导致无法正确读取打包后的SvelteKit资源。

修改electron.cjs：

// 替换原serveURL定义，指向SvelteKit打包目录
const serveURL = serve({ directory: './build' });

// 重写createMainWindow函数，统一加载逻辑
function createMainWindow() {
    mainWindow = createWindow();
    mainWindow.once('close', () => {
        mainWindow = null;
    });

    if (dev) {
        loadVite(port);
    } else {
        // 直接加载打包后的本地index.html，适配Electron打包后的路径结构
        const appURL = url.format({
            pathname: path.join(__dirname, 'index.html'),
            protocol: 'file:',
            slashes: true
        });
        mainWindow.loadURL(appURL);
    }
}

2. 完善SvelteKit静态适配器配置 #

使用adapter-static时，需确保预渲染和路径配置适配Electron本地文件环境：

修改svelte.config.cjs：

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter({
            fallback: '/index.html'
        }),
        // 适配Electron本地加载，确保资源路径正确
        paths: {
            base: ''
        },
        // 确保首页被预渲染，避免白屏
        prerender: {
            entries: ['/']
        }
    }
};

export default config;

3. 验证Electron Forge打包配置 #

当前forge.config.cjs中packagerConfig.dir: './build'的配置是正确的，确保打包时会将SvelteKit的构建产物作为Electron应用的资源目录，无需修改。

4. 调试排查技巧 #

若修复后仍白屏，可临时开启生产环境DevTools定位具体错误：
在electron.cjs的createWindow函数中修改webPreferences：

webPreferences: {
    // ...其他配置
    devTools: true // 临时开启，打包后查看控制台的资源加载/JS报错
}

常见错误包括：资源路径404、JS语法错误、上下文隔离配置冲突等。

内容的提问来源于stack exchange，提问作者Craig Howell