如何在Nuxt 3+Nuxt Content中使用Monorepo根目录公共资源

环境 #

• nuxt: ^3.17.5
• @nuxt/content: ^3.6.3
• better-sqlite3: ^12.2.0

问题背景 #

采用Monorepo架构，共享静态资源统一放在<repo>/public/img目录，希望<repo>/apps/…下的所有Nuxt应用都能直接引用这些资源。目前：

• ✅ Vue组件中使用<img src="/img/supply-chain.svg">可以正常加载图片
• ❌ content/*.md中的Markdown图片（如![World map | Figure 1: World map.](/img/supply-chain.svg)）无法显示，只有将图片复制到对应应用的apps/web/public/img目录才有效，导致资源重复。

已配置nitro.publicAssets（对Vue组件有效，但Markdown无效）：

import { defineNuxtConfig } from 'nuxt/config'
import { resolve } from 'node:path'

export default defineNuxtConfig({
  nitro: {
    publicAssets: [
      {
        dir: resolve(__dirname, '../public/img'),
        baseURL: '/img',
        maxAge: 60 * 60 * 24 * 30
      }
    ]
  }
})

解决方案 #

方法1：配置Nuxt Content的资源解析路径 #

Nuxt Content默认优先读取应用自身的public目录，通过配置content.assets可以添加额外的资源目录，让Content解析/img路径时同时检查根目录的共享资源：

import { defineNuxtConfig } from 'nuxt/config'
import { resolve } from 'node:path'

export default defineNuxtConfig({
  nitro: { /* 保留原有配置 */ },
  content: {
    assets: {
      dirs: [
        // 保留应用自身的img目录（可选，若不需要可删除）
        { path: './public/img', baseURL: '/img' },
        // 添加根目录的共享img目录
        { path: resolve(__dirname, '../public/img'), baseURL: '/img' }
      ]
    }
  }
})

配置后，Content会按顺序查找资源，优先使用应用自身目录的资源，不存在则使用根目录的共享资源。

方法2：通过Vite别名+Content标签处理 #

通过Vite别名映射/img到根目录的共享资源，同时自定义Content的图片标签处理逻辑，确保Markdown中的路径被正确解析：

import { defineNuxtConfig } from 'nuxt/config'
import { resolve } from 'node:path'

export default defineNuxtConfig({
  nitro: { /* 保留原有配置 */ },
  vite: {
    resolve: {
      alias: {
        '/img': resolve(__dirname, '../public/img')
      }
    },
    build: {
      rollupOptions: {
        output: {
          // 确保构建时资源输出到img目录，保持路径一致性
          assetFileNames: 'img/[name].[hash][extname]'
        }
      }
    }
  },
  content: {
    markdown: {
      tags: {
        img: {
          attrs: {
            src: (src: string) => {
              // 替换Markdown中的/img路径为实际根目录路径
              if (src.startsWith('/img/')) {
                return src.replace('/img/', resolve(__dirname, '../public/img/') + '/')
              }
              return src
            }
          }
        }
      }
    }
  }
})

这个方案在开发环境通过Vite别名直接映射，构建时通过Rollup配置确保资源被正确打包，同时让Content能正确解析Markdown中的图片路径。

方法3：创建软链接（简单高效） #

本地开发时，在每个应用的public目录下创建指向根目录共享img的软链接，避免资源复制：

# 在apps/web/public目录下执行
ln -s ../../public/img img

CI环境中可添加创建软链接的步骤（Windows环境使用mklink /D img ../../public/img）。这种方式无需修改配置，直接让应用的public/img指向共享目录，Content会自动识别。

验证 #

配置完成后重启Nuxt服务，访问渲染Markdown的页面，确认图片正常加载；修改根目录的图片后，检查所有应用的图片是否同步更新，确保资源一致性。

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