在SvelteKit中使用Vite glob import时如何获取markdown文件正文？

问题排查与解决方法 #

1. 先修复语法错误

你示例里的打印代码括号位置错误，导致实际读取的是不存在的属性，正确写法如下：

// 错误写法
// console.log(employmentsMeta[Object.keys(employmentsMeta)[0]['default']])
// 正确写法
console.log(employmentsMeta[Object.keys(employmentsMeta)[0]]['default'])

修复后如果还是返回undefined，再继续排查插件配置问题。

2. 适配不同markdown处理插件的配置

你能正常读取metadata说明frontmatter解析功能正常，拿不到正文是因为插件未配置正文导出规则，分两种常用场景处理：

场景1：使用vite-plugin-markdown处理md文件

修改你的vite.config.js配置，在插件参数的mode字段加入你需要的正文导出格式：

import { defineConfig } from 'vite';
import markdownPlugin from 'vite-plugin-markdown';

export default defineConfig({
  plugins: [
    markdownPlugin({
      // 可选值：markdown(原始md字符串)、html(编译后的html字符串)、toc(目录)、metadata(元数据)
      mode: ['html', 'metadata']
    })
  ]
});

配置完成后，可直接通过对应属性读取正文：

// 取编译后的html内容
const htmlContent = employmentsMeta[path].html
// 取原始markdown内容（mode需要加'markdown'）
const rawContent = employmentsMeta[path].markdown

场景2：使用mdsvex（SvelteKit官方推荐md处理方案）

mdsvex默认会把md文件编译为Svelte组件，default导出的就是组件构造函数，不需要额外配置，直接在模板中用svelte:component渲染即可：

<script context="module">
    export async function load() {
        const employmentsMeta = import.meta.globEager('./employments/*.md');
        return {
            props: {
                employmentsMeta: Object.values(employmentsMeta)
            }
        };
    }
</script>

<script>
    export let employmentsMeta;
</script>

{#each employmentsMeta as post}
    <!-- 读取元数据 -->
    <h2>{post.metadata.title}</h2>
    <!-- 渲染markdown正文 -->
    <svelte:component this={post.default} />
{/each}

如果需要获取原始markdown字符串，可单独用raw模式批量导入：

const rawContents = import.meta.globEager('./employments/*.md', { as: 'raw' });

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