如何在Nuxt 3项目中包含Fontwo敬畏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'
]
}
})

/插件/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并通过localhost查看页面时，图标会显示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'添加到您的转发器中。您使用的是免费软件包，但仅可传输专业版。