Svelte+Electron无法渲染代码，仅显示模板占位符求助

算力阿峰

2026-8-6

Electron + SvelteKit 渲染异常问题解决方案

问题概述

Electron窗口可正常创建，但app.html页面仅显示%sveltekit.head%、%sveltekit.body%占位符，无法渲染SvelteKit默认内容
package.json设置"type":"commonjs"时：Electron窗口正常，但Svelte代码无渲染；改为"type":"module"时：electron/index.js触发模块语法报错

具体解决步骤

1. 适配Electron的模块系统

由于SvelteKit默认使用ES模块，而Electron原生CommonJS语法会与ES模块冲突，需对Electron入口文件做兼容处理：

在electron/index.js顶部添加以下代码，实现ES模块环境下的CommonJS兼容：
```
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
```
或者将electron/index.js重命名为electron/index.mjs，并更新package.json的main字段：
```
"main": "electron/index.mjs"
```

2. 确保Electron正确加载SvelteKit资源

开发环境：Electron窗口需加载Vite的开发服务地址，而非本地静态文件。修改Electron窗口创建代码：
```
mainWindow.loadURL('http://localhost:5173');
```

生产环境：确保SvelteKit构建产物路径正确，在svelte.config.js中指定输出目录：

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build'
    })
  }
};

同时更新Electron加载路径：

mainWindow.loadFile(path.join(__dirname, '../build/index.html'));

3. 修复package.json配置冲突

保留"type":"module"，避免SvelteKit模块加载失败
调整启动脚本，确保Vite服务优先启动：
```
"scripts": {
  "dev": "vite dev",
  "start": "concurrently \"npm run dev\" \"electron .\""
}
```
若未安装concurrently，先执行npm install --save-dev concurrently