文章目录
- 前言
- 📊 方案对比总览
- 📝 方案一：基础展示 (marked + DOMPurify)
- 🚀 方案二：专业解析 (markdown-it)
- 💬 方案三：AI 流式对话 (Vue Stream Markdown)
- 1. 安装依赖
- 2. 封装流式组件
- 🛡️ 关键注意事项 (SSR 与 安全)
- 避坑指南 💡
- 1. XSS 防护（必须做）
- 2. 代码高亮配置（markdown-it）
- 3. 流式输出性能优化
- 实战：搭建 ChatGPT 风格界面
- 总结
前言
在开发 AI 对话应用、技术文档站点或博客系统时，经常需要在 Vue 中渲染 Markdown 内容。本文总结了 3 种主流方案，从轻量级到专业化，帮你快速选型并落地。
📊 方案对比总览
| 维度 | 方案一：marked + DOMPurify | 方案二：markdown-it (推荐) | 方案三：流式渲染组件 |
|---|---|---|---|
| 核心特点 | 简单粗暴，适合纯前端展示 | 插件生态最强，解析速度快 | 专为 AI 对话/长文本设计 |
| 代码高亮 | 需手动配置 | 内置支持，配置简单 | 依赖组件库实现 |
| SSR 支持 | 不支持 (依赖 window) | 完美支持 | 视具体组件而定 |
| 适用场景 | 简单的博客文章展示 | 通用文档、技术文章、评论 | ChatGPT 类对话、实时打字机 |
📝 方案一：基础展示 (marked + DOMPurify)
适用场景：对 SEO 无要求，仅需快速将 Markdown 转为 HTML 的简单页面。
核心修正：此方案主要用于纯前端渲染。如果是 Nuxt.js 等 SSR 项目，请改用isomorphic-dompurify或js-xss。
<template><divclass="markdown-body"v-html="renderedHtml"></div></template><scriptsetup>import{ref,watch}from'vue';import{marked}from'marked';importDOMPurifyfrom'dompurify';constprops=defineProps({content:{type:String,required:true}});constrenderedHtml=ref('');constrenderMarkdown=()=>{// 1. 解析 MarkdownconstrawHtml=marked.parse(props.content);// 2. 安全过滤 (防止 XSS)renderedHtml.value=DOMPurify.sanitize(rawHtml);};watch(()=>props.content,renderMarkdown,{immediate:true});</script><style>
 常用的肿瘤标志物_MCE 中国)