Vite与SvelteKit：配置多HTML入口文件的方法

可以通过扩展Vite的Rollup配置实现单一构建生成两个独立入口文件，具体步骤如下：

1. 确认目录结构 #

保持你提供的目录结构，确保src/app.html（主入口模板）和other/app.html（次入口模板）存在，同时为次入口准备对应的页面组件——比如在other/routes/+page.svelte编写页面内容，若需要独立路由，可按SvelteKit路由规则在other/routes下添加更多页面文件。

2. 修改SvelteKit配置文件 #

在项目根目录的svelte.config.js中，扩展Vite的构建配置，指定多入口：

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter(),
    vite: {
      build: {
        rollupOptions: {
          // 定义两个入口，key对应输出文件名（main对应index.html，other对应other.html）
          input: {
            main: './src/app.html',
            other: './other/app.html'
          }
        }
      },
      // 可选：为other目录代码添加别名，方便组件引入
      resolve: {
        alias: {
          '$other': './other'
        }
      }
    },
    // 可选：让SvelteKit同时处理src和other目录的路由
    files: {
      routes: ['./src/routes', './other/routes'],
      appTemplate: './src/app.html' // 主入口模板，次入口单独在input中指定
    }
  }
};

export default config;

3. 配置次入口的app.html模板 #

other/app.html需遵循SvelteKit的模板格式，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Other Page</title>
	%sveltekit.head%
</head>
<body>
	<div id="svelte">%sveltekit.body%</div>
</body>
</html>

4. 构建与开发验证 #

• 构建：执行npm run build后，build目录下会生成平级的index.html（来自src/app.html）和other.html（来自other/app.html），以及对应的静态资源文件。
• 开发：启动开发服务器后，通过http://localhost:5173访问主入口，通过http://localhost:5173/other.html访问次入口。

若两个入口需要完全独立的依赖或路由逻辑，可进一步拆分配置，但上述方案已满足基础的多入口静态构建需求。

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