如何在Nuxt3+Nuxt Content的md文件中添加文件下载链接？

核心原因是Nuxt Content默认会把Markdown中的<a>标签转换为<NuxtLink>组件，导致静态PDF文件的路径被Vue Router当作路由解析，从而返回404。以下是几种可行的解决思路：

方法1：保留原生<a>标签（最简单） #

在Markdown的下载链接中添加data-no-nuxt属性，阻止Nuxt Content将其转换为NuxtLink：

<a href="/my_pdf_file.pdf" download data-no-nuxt>下载PDF</a>

这个属性会告诉Nuxt Content保留原生HTML标签，直接指向public文件夹下的静态资源，不会触发路由匹配。

方法2：配置Nuxt Content的Markdown解析规则 #

在nuxt.config.ts中修改content配置，让所有.pdf结尾的链接保留原生<a>标签：

export default defineNuxtConfig({
  content: {
    markdown: {
      rehypePlugins: [
        [
          'rehype-external-links',
          {
            target: '_blank',
            rel: ['noopener', 'noreferrer'],
            test: (node) => node.properties.href?.endsWith('.pdf')
          }
        ]
      ]
    }
  }
})

这样所有指向PDF的链接都会被处理为原生标签，无需逐个添加属性。

方法3：使用自定义下载组件 #

创建一个全局组件DownloadLink.vue：

<template>
  <a :href="useStaticAsset(filePath)" download>{{ label }}</a>
</template>

<script setup>
const props = defineProps({
  filePath: {
    type: String,
    required: true
  },
  label: {
    type: String,
    default: '下载'
  }
})
</script>

在nuxt.config.ts中注册全局组件：

export default defineNuxtConfig({
  components: {
    global: true,
    dirs: ['~/components']
  }
})

然后在Markdown文件中直接使用：

<DownloadLink filePath="/my_pdf_file.pdf" label="下载PDF" />

这种方式适合需要统一管理下载链接样式或逻辑的场景。

额外检查项 #

• 确认PDF文件确实放在public文件夹的根目录下，若放在子文件夹，链接需对应调整（如/docs/my_pdf_file.pdf）
• 清除Nuxt缓存，执行npx nuxi clean后重新启动项目

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