Nuxt3中Server插件调用有效却抛出TypeError问题求助

你的headTags.server.js是仅服务端运行的插件（文件名带.server后缀），这意味着该插件只会在Node.js服务端初始化，客户端浏览器环境中根本不存在$setTags方法。虽然服务端渲染时已经成功设置了meta标签，但页面在客户端 hydration（水合）阶段会重新执行这段代码，此时找不到$setTags就会抛出错误。

方案一：仅在服务端调用$setTags #

利用Nuxt内置的process.server环境变量，把调用逻辑限制在服务端执行，避免客户端触发：

修改pages/page.vue代码：

<script setup>
const { $setTags } = useNuxtApp()
const { find } = useStrapi4();

const { data } = await useAsyncData(
  "posts",
  async () => {
    const response = await find(...);
    const fetchedData = response.data[0].attributes;
    
    // 仅在服务端执行meta设置
    if (process.server) {
      $setTags(fetchedData);
    }
    
    return fetchedData;
  }
);
</script>

这里把异步函数内部的变量名改成fetchedData，避免和外层的data变量重名（这也是你之前移到return前data变null的可能原因），直接在服务端环境调用$setTags即可——因为异步函数内部拿到的是原始数据，不是ref对象，不需要用data.value。

方案二：将插件改为通用插件（兼容客户端） #

如果想保留在任意位置调用$setTags的灵活性，可以去掉插件文件名的.server后缀，同时在插件内部限制仅服务端执行meta设置逻辑：

修改plugins/headTags.js（去掉.server）：

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide("setTags", (data) => {
    // 仅在服务端执行meta相关逻辑
    if (!process.server) return;
    
    const runtimeConfig = useRuntimeConfig();

    useServerSeoMeta({
      // 你的meta配置
    })

    useServerHead({
      // 你的head标签配置
    })
  });
});

之后在页面中调用$setTags时，客户端环境下只会执行空逻辑，不会报错，服务端依然正常设置meta标签。

内容的提问来源于stack exchange，提问作者Robin Klöckner