求兼容vite-plugin-singlefile的Svelte+Vite预渲染单页极简配置

针对你的无路由单页场景，不需要复杂的SSR插件或SvelteKit，自己写个简单的预渲染脚本就能搞定，同时兼容vite-plugin-singlefile，步骤如下：

1. 开启客户端Hydration模式 #

修改你的src/main.js，添加hydrate: true参数，让Svelte客户端代码识别预渲染标记并完成 hydration：

import App from './App.svelte';

const app = new App({
  target: document.getElementById('app'),
  hydrate: true // 关键：启用hydration模式
});

export default app;

2. 编写预渲染脚本 #

在项目根目录创建scripts/prerender.js，利用Svelte自带的SSR能力生成初始HTML并注入到index.html：

import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
import App from '../src/App.svelte';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

// 服务端渲染App组件（如果需要初始数据，可先获取后传入render方法）
const { html, css } = App.render();

// 读取原始index.html
const indexPath = path.join(__dirname, '../index.html');
let indexContent = fs.readFileSync(indexPath, 'utf8');

// 替换占位符：把空的app容器替换为预渲染HTML，同时注入组件样式
indexContent = indexContent.replace(
  '<div id="app"></div>',
  `<div id="app">${html}</div>`
).replace(
  '</head>',
  `<style>${css.code}</style></head>`
);

// 写回处理后的index.html
fs.writeFileSync(indexPath, indexContent);

3. 配置Vite构建流程 #

修改vite.config.js，添加自定义插件在构建前执行预渲染脚本，再配合vite-plugin-singlefile打包成单文件：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { viteSingleFile } from 'vite-plugin-singlefile';
import { execSync } from 'child_process';

export default defineConfig({
  plugins: [
    svelte(),
    viteSingleFile(),
    {
      name: 'prerender',
      buildStart() {
        // 构建前先运行预渲染脚本
        execSync('node scripts/prerender.js', { stdio: 'inherit' });
      }
    }
  ],
  build: {
    outDir: 'dist',
    emptyOutDir: true
  }
});

4. 测试验证 #

运行npm run build后，打开dist/index.html查看源码：

• 原来的空<div id="app"></div>会被替换为App组件预渲染的HTML内容
• 所有依赖资源会被vite-plugin-singlefile内联到这个HTML里
• 页面加载后，客户端代码会自动hydrate预渲染内容，交互完全正常

这个方案的优势：

• 完全适配无路由单页场景，无冗余文件输出
• 与vite-plugin-singlefile完美兼容
• 无需引入复杂框架或插件，实现成本极低

内容的提问来源于stack exchange，提问作者John Goofy