Vite 中处理 Markdown 和 YAML 文件采用分层处理：用 import.meta.glob 批量读取，gray-matter 提取 Front Matter，marked + DOMPurify 安全渲染，js-yaml 解析 YAML，插件可将 Markdown 转为 Vue 组件。
在 Vite 中处理 Markdown 和 YAML 文件，核心思路是“分层处理”：用 import.meta.glob 批量读取文件内容，再用专用解析库提取结构化数据，最后按需渲染或注入应用。不需要后端、不依赖构建时预编译，所有逻辑都在前端运行。
批量导入 Markdown 文件并提取元数据
Vite 原生支持 import.meta.glob，可直接匹配 .md 文件：
- 把文章放在
src/content/posts/下，用import.meta.glob('./posts/**/*.md', { eager: true })一次性加载全部 - 每个模块默认导出的是原始 Markdown 字符串，不是 HTML
- 配合
gray-matter解析 Front Matter（YAML 格式的头部信息），例如：const { data, content } = matter(mdString)，data就是标题、日期、标签等对象
安全渲染 Markdown 内容
不能直接 v-html 渲染，必须过滤潜在 XSS 风险：
Xlsx To Markdown
下载
文档转 Markdown 转换器 - 将 DOCX、PPTX、Excel 文件转换为 Markdown。用于从 Word 文档、PowerPoint 演示文稿或 E... 提取内容。
- 推荐组合：
marked（转 Markdown → HTML） +DOMPurify（清洗 HTML） - 示例：
const html = DOMPurify.sanitize(marked.parse(content)) - 若需语法高亮，可在
marked的renderer中集成highlight.js或shiki
解析 YAML 文件（如配置、数据表）
YAML 不是 JavaScript 原生格式，需借助 js-yaml：
立即学习“Java免费学习笔记（深入）”；
- 安装：
npm install js-yaml - 导入后使用
yaml.load()解析字符串（如从fetch获取的文件内容） - 支持多文档（
---分隔）：yaml.loadAll(yamlString)返回数组 - 注意加
try/catch，YAML 格式错误会抛异常，影响页面加载
让 Markdown 文件直接变成 Vue 组件（进阶）
这不是 Vite 默认能力，但可通过插件实现：
- 编写或使用现成 Vite 插件（如
@varlet/markdown-vite-plugin） - 插件在
transform阶段将.md内容转为标准 Vue SFC 格式（含<template>+<script>） - 同时配置
@vitejs/plugin-vue的include选项，让它也处理.md后缀 - 之后就能像
import Post from './post.md'这样直接当组件使用
