NuxtLink 的子级渲染两次（水合错误？）

Question

我的预感是存在一些水合不匹配，其中FontAwesomeIcon未在服务器上渲染（仅span），然后在客户端上NuxtLink渲染 的两个子节点（svg和span），提示 Nuxt 渲染span两次。

但控制台不会返回错误。

关于如何调试这个有什么想法吗？

这是 Vue 组件：

<template>
  <ul v-if="routes.length > 0" class="col-span-2 flex flex-col">
    <li v-for="(item, i) in routes" :key="item.name">
      <NuxtLink :to="item.path" target="_blank">
        <FontAwesomeIcon :icon="item.icon" class="mr-3" fixed-width />
        <span>{{ item.title }}</span>
      </NuxtLink>
    </li>
  </ul>
</template>

<script lang="ts">
export default defineComponent({
  props: {
    links: {
      type: Array,
      default: () => ["instagram", "facebook", "email"],
    },
  },
  computed: {
    routes() {
      return [
        {
          name: "instagram",
          path: "https://www.instagram.com/insta.name/",
          title: "Instagram",
          icon: ["fab", "instagram"],
        },
        {
          name: "facebook",
          path: "https://www.facebook.com/fb.name",
          title: "Facebook",
          icon: ["fab", "facebook"],
        },
        {
          name: "email",
          path: "mailto:hello@example.com",
          title: "Email",
          icon: ["fas", "envelope"],
        },
      ].filter((e) => this.links.includes(e.name));
    },
  },
});
</script>

Answer 1

我遇到的清理解决方案是这样的：将@fortawesome/vue-fontawesome包转译到您的nuxt.config.ts：

// nuxt.config.ts

export default defineNuxtConfig({
  build: {
    transpile: [
      '@fortawesome/vue-fontawesome',
    ]
  },
  // ...
})

解决方案发布在这里： https://github.com/nuxt/nuxt/discussions/16014#discussioncomment-2477885。

我发现它足以转译@fortawesome/vue-fontawesome。