如何正确导入Nuxt/Content？导入解析错误求助

问题重现 #

在Nuxt页面中展示content目录下的Markdown文件时，出现两种报错：

1. 导入#content时：

[plugin:vite:import-analysis] Failed to resolve import "#content" from "pages/info.vue". Does the file exist?

2. 直接导入@nuxt/content时：

[plugin:vite:import-analysis] Importing directly from module entry-points is not allowed. [importing @nuxt/content from pages/info.vue]

相关配置与代码如下：

pages/info.vue 代码 #

<script setup>
import { queryContent } from "#content";
const { data: infoDisclaimer } = await queryContent("/infoDisclaimer").findOne();
</script>

<template>
  <NuxtContent :document="infoDisclaimer" />
</template>

content/infoDisclaimer.md 内容 #

hello

nuxt.config.ts 配置 #

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxt/content']
})

content.config.ts 配置 #

import { defineContentConfig } from '@nuxt/content'

export default defineContentConfig({
  documentDriven: false,
  markdown: {
    remarkPlugins: [],
    rehypePlugins: []
  }
})

环境信息 #

- Operating System: Darwin
- Node Version:     v22.2.0
- Nuxt Version:     3.15.4
- CLI Version:      3.22.2
- Nitro Version:    2.10.4
- Package Manager:  npm@10.7.0
- Runtime Modules:  @nuxt/content@3.2.1

解决办法 #

1. 移除手动导入，直接使用自动注册的composable #

Nuxt Content会自动全局注册queryContent等工具函数，无需手动导入。修改后的代码：

<script setup>
// 删掉import语句，直接调用queryContent
const { data: infoDisclaimer } = await queryContent("/infoDisclaimer").findOne();
</script>

<template>
  <NuxtContent :document="infoDisclaimer" />
</template>

2. 清理缓存并重新安装依赖 #

• 执行npm install确保依赖安装完整
• 删除项目下的.nuxt、.output目录，以及node_modules/.cache文件夹
• 重启开发服务器：npx nuxi dev

3. 验证content目录结构 #

确保infoDisclaimer.md放在项目根目录的content文件夹下，路径为content/infoDisclaimer.md，文件名与queryContent中的参数完全匹配（注意大小写敏感）。

4. 尝试版本降级（可选） #

若当前版本存在兼容性问题，可尝试降级依赖：

• 降级Nuxt到3.14.x：npm install nuxt@3.14.159
• 降级Nuxt Content到3.1.x：npm install @nuxt/content@3.1.12

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