如何使用@nuxtjs/content模块从CDN拉取独立托管的.md文件？

你当前的配置无法实现从CDN拉取外部md文件的需求
原因：@nuxtjs/content 模块的 dir 配置项仅支持传入本地文件系统的目录路径，默认只会扫描本地项目内的指定目录加载内容，不支持直接传入远程HTTP/HTTPS地址拉取外部文件。

你可以通过手动拉取远程md文件+调用模块内置解析能力的方式实现需求，调整步骤如下：

1. 移除nuxt.config.js中content.dir的远程地址配置，保留默认配置即可：

// nuxt.config.js
export default {
  // 其他配置保持不变
  content: {
    // 原远程dir配置直接删除即可
  }
}

2. 修改pages/_slug.vue的逻辑，直接从CDN拉取md内容后交给@nuxtjs/content解析：

<template>
  <div>
    <div v-if="error">页面不存在</div>
    <NuxtContent :document="doc" v-if="doc" />
  </div>
</template>

<script>
export default {
  async asyncData({ $content, params, error }) {
    const slug = params.slug || 'index'
    try {
      // 从CDN拉取对应md文件的原始内容
      const response = await fetch(`http://some-cdn.xyz/content/${slug}.md`)
      if (!response.ok) throw new Error('资源不存在')
      const rawMd = await response.text()
      // 调用content模块的parse方法将md解析为组件可识别的格式
      const doc = await $content.parse(slug, rawMd)
      return { doc }
    } catch (err) {
      return error({ statusCode: 404, message: '页面未找到' })
    }
  }
}
</script>

3. 额外注意事项：

• 如果你的Nuxt应用是客户端渲染（SPA）模式，需要在CDN侧配置CORS跨域规则，允许你的站点域名发起请求，否则会被浏览器跨域策略拦截
• 如果是服务端渲染（SSR）模式，拉取请求会在服务端发起，无需配置CORS，但要确保服务端网络可以正常访问你的CDN地址
• 如果你需要使用内容搜索、内容列表预览等@nuxtjs/content的高级能力，需要自行拉取CDN上全量的md文件清单，或者单独维护一份内容索引文件供查询使用

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