svelte-kit dev运行不生成index.html，如何配置实现同build一致输出？

SvelteKit 原生 dev 模式默认将所有资源托管在内存中，不会向磁盘写入静态 index.html 文件，你可以通过以下两种方案实现需求：

方案一（推荐）：使用 build 监听模式 #

这个方案适配你的使用场景，不需要额外修改配置，输出的文件和正式构建完全一致，不会有路径兼容问题：

• 修改 package.json 中的 scripts 配置，将 dev 命令替换为：
  "dev": "svelte-kit build --watch"
• 执行 npm run dev 后，每次修改代码都会自动触发 build 流程，build 目录下的 index.html 和静态资源会实时更新，Laravel 服务器可以直接读取使用。
  注意：该方案为全量构建，热更新速度比原生 dev 模式稍慢

方案二：dev 模式下通过 Vite 插件输出 index.html #

如果需要保留 svelte-kit dev 的热更新速度，同时输出 index.html 到磁盘，可以在 svelte.config.js 中添加自定义 Vite 插件，修改后的配置如下：

// svelte.config.js file
import adapter from '@sveltejs/adapter-static';
import fs from 'fs';
import path from 'path';

const config = {
kit: {
    adapter: adapter(),
    
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',

    vite: {
        optimizeDeps: {
            include: ['just-throttle', 'dayjs']
        },
        plugins: [
            {
                name: 'dev-emit-index-html',
                apply: 'serve',
                transformIndexHtml: {
                    order: 'post',
                    handler(html) {
                        // 自定义输出路径，这里输出到项目根目录的build/index.html
                        const outputPath = path.resolve(process.cwd(), 'build', 'index.html');
                        // 确保build目录存在
                        fs.mkdirSync(path.dirname(outputPath), { recursive: true });
                        // 写入文件
                        fs.writeFileSync(outputPath, html);
                        return html;
                    }
                }
            }
        ]
    }

   },
};

export default config;

注意：该方案输出的 index.html 引用的静态资源路径是 dev 服务的内存路径，只能在 dev 服务启动时正常访问，如果你需要资源路径也指向本地磁盘文件，建议优先使用方案一

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