Nuxt.js集成Sanity.io报错：无法找到@nuxtjs/sanity模块

排查与修复步骤 #

1. 修正Groq的导入路径 #

@nuxtjs/sanity模块已内置Groq，无需单独安装@sanity/groq。错误的导入路径会导致依赖识别失败，正确写法如下：

// Nuxt 2 正确导入方式
import groq from '@nuxtjs/sanity/dist/groq'

// Nuxt 3 可直接使用自动导入的useSanityQuery，无需手动导入groq
const { data: posts } = useSanityQuery(groq`*[_type == "post"]`)

2. 确认nuxt.config.js的模块配置完整性 #

确保Sanity模块已正确注册并配置核心参数，配置后必须重启开发服务器：

export default {
  modules: [
    '@nuxtjs/sanity'
  ],
  sanity: {
    projectId: '你的Sanity项目ID',
    dataset: '目标数据集名称',
    useCdn: true // 根据需求开启/关闭CDN
  }
}

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

缓存或损坏的依赖文件可能导致识别异常，执行以下命令重置依赖：

# 清除yarn缓存
yarn cache clean
# 删除旧依赖文件
rm -rf node_modules yarn.lock
# 重新安装依赖
yarn install
# 重启开发服务
yarn dev

4. 校验版本兼容性 #

@nuxtjs/sanity的版本需与Nuxt主版本匹配，不兼容会引发加载问题：

• Nuxt 2 需使用@nuxtjs/sanity v0.x版本
• Nuxt 3 需使用@nuxtjs/sanity v1.x及以上版本

查看当前版本并调整：

# 查看已安装版本
yarn list @nuxtjs/sanity
# Nuxt 2 安装兼容版
yarn add @nuxtjs/sanity@0.10.0
# Nuxt 3 安装最新版
yarn add @nuxtjs/sanity@latest

5. 规范组件内数据获取代码 #

在页面组件中，建议使用Nuxt提供的asyncData/fetch方法结合注入的$sanity实例，避免手动创建客户端引发的问题：

<template>
  <div v-for="post in posts" :key="post._id">{{ post.title }}</div>
</template>

<script>
import groq from '@nuxtjs/sanity/dist/groq'

export default {
  async asyncData({ $sanity }) {
    const posts = await $sanity.fetch(groq`*[_type == "post"]`)
    return { posts }
  }
}
</script>

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