VuePress 中如何正确引入自定义 HTML 组件?

Dev · 锦玉 阅读 16

我在 VuePress 项目里想嵌入一段静态的 HTML 内容,比如一个带样式的提示框,但直接写在 Markdown 里样式不生效。我试过用 ::: v-pre 包裹,也试过在 .vuepress/components 下建组件,但还是没搞定。

下面这段 HTML 在普通页面能正常显示,但在 VuePress 的 markdown 文件里就丢失样式了,是不是得用特殊方式引入?

<div class="notice-box">
  <span class="icon">⚠️</span>
  <p>这是一个重要提示</p>
</div>
我来解答 赞 5 收藏
二维码
手机扫码查看
1 条解答
欧阳志鸣
这个问题我之前踩过,说白了就是 VuePress 解析 Markdown 的时候把原生 HTML 当普通文本处理了,样式当然不生效。

最靠谱的解决办法是把那段 HTML 封装成 Vue 组件。

首先在项目根目录创建 .vuepress/components/NoticeBox.vue 文件:






然后在 Markdown 文件里直接用组件标签:

# 这里是标题



下面继续正文内容...


VuePress 会自动注册 .vuepress/components 目录下的组件,不用额外配置。

你之前试的 v-pre 那个方法,理论上能阻止 Markdown 解析,但样式问题还是得靠 CSS 文件或者组件内的 style 来解决。如果你不想用组件,那就得在 .vuepress/config.js 的 head 配置里引入一个全局 CSS 文件,把样式写在那里,然后在 Markdown 里写原生 HTML 才能生效。

用组件的方式是最省心的,样式隔离不说,用起来也直接。
点赞
2026-03-12 04:02