如何在每次Vite构建启动时执行自定义命令？（SvelteKit+Vercel环境）

方法1：通过package.json脚本链实现 #

SvelteKit默认构建命令为vite build，你可以直接修改package.json的scripts字段，先执行索引生成脚本再启动构建：

{
  "scripts": {
    "build": "node scripts/generate-md-index.js && vite build",
    "dev": "vite dev"
  }
}

• 把Markdown索引生成逻辑写在scripts/generate-md-index.js中，比如遍历指定目录下的Markdown文件，提取标题、路径、元数据等信息，生成JSON/TS格式的索引文件（例如src/lib/md-index.json）。
• Vercel在自动构建时会默认执行npm run build，每次推送代码触发构建时，都会先运行索引生成脚本，再完成项目构建流程。

方法2：利用Vite的buildStart钩子深度集成 #

如果需要更灵活的控制（比如仅在生产构建时执行、和Vite构建流程深度绑定），可以在vite.config.js（或.ts）中自定义Vite插件，借助buildStart钩子触发脚本：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import generateMdIndex from './scripts/generate-md-index.js';

export default defineConfig({
  plugins: [
    sveltekit(),
    {
      name: 'generate-md-index',
      buildStart() {
        // 调用索引生成逻辑
        generateMdIndex();
      }
    }
  ]
});

• 将索引生成逻辑封装为可导出函数，在buildStart钩子中调用。这个钩子会在Vite启动构建时自动触发，无论本地执行vite build还是Vercel上的自动构建都会生效。

预生成索引的使用示例 #

生成索引文件后，你可以在SvelteKit页面或服务端路由中直接导入使用，避免请求时动态遍历文件：

<script>
  import mdIndex from '$lib/md-index.json';
</script>

<ul>
  {#each mdIndex as item}
    <li><a href="{item.path}">{item.title}</a></li>
  {/each}
</ul>

内容的提问来源于stack exchange，提问作者Eli O.