如何在SvelteKit中导入Markdown文件？static路径引用报错怎么解决？

报错原因 #

SvelteKit的static目录对应Vite的public目录，该目录下的文件会直接复制到构建产物的根路径，仅支持通过URL路径访问，不支持通过ES模块的import语法引入作为模块内容，因此你修改路径后仍然触发导入错误。

可选解决方案 #

方案1：保留md文件在static目录，动态fetch加载 #

适合md文件需要频繁修改、不想每次修改都重新打包项目的场景，直接通过网络请求拉取md文本内容：

<script>
    import Markdown from '../components/Markdown.svelte';
    let markdownContent = '';

    async function loadMarkdown() {
        const response = await fetch('/assets/docs/overview.md');
        markdownContent = await response.text();
    }

    loadMarkdown();
</script>

<article class="prose prose-red max-w-none">
    {#if markdownContent}
        <Markdown markdown={markdownContent} />
    {:else}
        <p>内容加载中...</p>
    {/if}
</article>

方案2：将md文件移入src目录，构建时打包进产物 #

适合md内容相对固定，希望减少额外网络请求的场景：

1. 新建src/markdown（或任意你习惯的src子目录），将overview.md移动到该目录下
2. 导入时添加?raw后缀，告诉Vite直接返回文件的纯文本内容：

<script>
    import Markdown from '../components/Markdown.svelte';
    // 路径根据你实际的文件位置调整，?raw后缀不可省略
    import markdownContent from '../markdown/overview.md?raw';
</script>

<article class="prose prose-red max-w-none">
    <Markdown markdown={markdownContent} />
</article>

补充说明 #

如果你需要导入md时自动解析为HTML或者Svelte组件，可以安装vite-plugin-markdown等相关Vite插件，配置后即可直接导入解析后的内容，无需自己手动处理文本解析。

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