如何在 Nuxt 3 项目中包含 Fontawesome 6？

Question

首先是我的配置：

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
    // if you want to use static HTML generation (SSG)
    target: 'static',

    // if you want to use server-side rendering (SSR)
    ssr: true,

    css: [
        'assets/scss/main.css',
        'assets/scss/header.css',
        '@fortawesome/fontawesome-svg-core/styles.css'
    ],

    build: {
        transpile: [
            '@fortawesome/vue-fontawesome',
            '@fortawesome/fontawesome-svg-core',
            '@fortawesome/pro-solid-svg-icons',
            '@fortawesome/pro-regular-svg-icons',
            '@fortawesome/free-brands-svg-icons'
        ]
    }

})

/plugins/fontawesome.js

import { defineNuxtPlugin } from '#app';

/** Fontawesome for Nuxt 3
 * https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt 
 * 
*/

// import the fontawesome core
import { library, config } from '@fortawesome/fontawesome-svg-core'

// import font awesome icon component 
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// import specific icons 
import { fas } from '@fortawesome/free-solid-svg-icons'

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false


export default defineNuxtPlugin((nuxtApp) => {
  console.log('[Plugin]', 'Font Awesome')
  
  // You can add your icons directly in this plugin. See other examples for how you
  // can add other styles or just individual icons.
  library.add(fas);

  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})

<template>
  <header class="header">
    <Logo />

    coffee <font-awesome-icon icon="fas coffee" /> 
    flag <font-awesome-icon icon="fas fa-flag" />
    search <font-awesome-icon icon="fas fa-magnifying-glass" />
    search 2 <font-awesome-icon icon="fa-solid fa-magnifying-glass" />

    <nav>
      <nuxt-link :to="{ path: '/' }">
        Home
      </nuxt-link>
      <nuxt-link :to="{ path: '/getting-started' }">
        Getting Started
      </nuxt-link>
      <nuxt-link :to="{ path: '/faq' }">
        FAQ
      </nuxt-link>
      <nuxt-link :to="{ path: '/search' }">
        <font-awesome-icon icon="fas fa-magnifying-glass" />
      </nuxt-link>
    </nav>

  </header>
</template>

问题 当我启动 npx nuxi dev 并通过本地主机查看页面时，图标出现 1 秒钟，然后不再可见。我一直在寻找解决方案很长一段时间，因为我无法立即找到错误。

警告 - 控制台

[Vue warn]: Hydration node mismatch:
- Client vnode: font-awesome-icon 
- Server rendered DOM: <svg class=​"svg-inline--fa fa-magnifying-glass" style aria-hidden=​"true" focusable=​"false" data-prefix=​"fas" data-icon=​"magnifying-glass" role=​"img" xmlns=​"http:​/​/​www.w3.org/​2000/​svg" viewBox=​"0 0 512 512">​…​</svg>​  
  at <Navigation> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>

Answer 1

您可以将组件包装在

<client-only>

中，因此它只呈现客户端。

<client-only>
 <font-awesome-icon icon="fas fa-flag" />
</client-only>

Answer 2

也许您需要将

'@fortawesome/free-solid-svg-icons'

添加到您的转译器中。您使用的是免费包，但只转译专业版。