SvelteKit中如何配置静态HTML文件的href路径及docsDir目录？

一、docsDir目录的正确位置 #

把docsDir直接放在项目根目录的static文件夹下即可，目录结构示例：

your-sveltekit-project/
├─ static/
│  └─ docsDir/
│     ├─ doc1.html
│     ├─ doc2.html
│     └─ ...

SvelteKit会自动将static目录下的所有资源映射到网站根路径，你代码里的href={docsDir/${doc.fileName}}就能正确指向对应的HTML文档，访问时的实际路径为/docsDir/xxx.html。

二、更优实现方式 #

1. 自动生成文档列表（无需手动维护docs数组） #

不用手动写死docs数组，在页面的服务器端load函数里自动读取docsDir的文件：
在对应页面的+page.server.js中编写：

import { readdirSync, readFileSync } from 'fs';
import { join } from 'path';

export async function load() {
  const docsDir = join(process.cwd(), 'static', 'docsDir');
  const files = readdirSync(docsDir).filter(file => file.endsWith('.html'));

  const docs = files.map(file => {
    // 可选：读取HTML文件的<title>作为文档标题，替代文件名
    const content = readFileSync(join(docsDir, file), 'utf8');
    const titleMatch = content.match(/<title>(.*?)<\/title>/);
    const docTitle = titleMatch ? titleMatch[1] : file;

    return {
      fileName: file,
      docTitle
    };
  });

  return { docs };
}

然后在+page.svelte里直接使用data.docs：

<tbody>
  {#each data.docs as doc, i}
    <tr>
      <td>{i + 1}</td>
      <td><a href={`docsDir/${doc.fileName}`} target="_blank">{doc.docTitle}</a></td>
    </tr>
  {/each}
</tbody>

新增文档后无需修改代码，列表会自动更新。

2. 适配部署路径（避免子路径失效） #

如果项目部署在网站子路径下（比如https://example.com/docs/），可以用SvelteKit提供的base变量拼接路径，确保链接正确：
在+page.svelte中导入：

import { base } from '$app/paths';

修改链接：

<a href={`${base}/docsDir/${doc.fileName}`} target="_blank">{doc.docTitle}</a>

3. 优化交互体验 #

• 给链接加上target="_blank"，让文档在新标签页打开，避免用户离开列表页面；
• 文档数量较多时，添加搜索框、分类筛选功能，提升查找效率；
• 替换表格为Flex/Grid卡片布局，适配移动端展示。

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