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:[email protected]",
          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

。

Answer 2

有更好的解决方案，请看我的另一个答案。

将你

<FontAwesomeIcon />

包裹在

<span>

中，如下所示：

...
<NuxtLink to="/path" target="_blank">
  <span><FontAwesomeIcon :icon="icon" fixed-width /></span>
  <span>{{ title }}</span>
</NuxtLink>
...

所有功劳都归于：https://stackoverflow.com/a/73487636/4862595