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

Question

首先我的配置：

\n

nuxt.config.ts

\n

import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n    // if you want to use static HTML generation (SSG)\n    target: 'static',\n\n    // if you want to use server-side rendering (SSR)\n    ssr: true,\n\n    css: [\n        'assets/scss/main.css',\n        'assets/scss/header.css',\n        '@fortawesome/fontawesome-svg-core/styles.css'\n    ],\n\n    build: {\n        transpile: [\n            '@fortawesome/vue-fontawesome',\n            '@fortawesome/fontawesome-svg-core',\n            '@fortawesome/pro-solid-svg-icons',\n            '@fortawesome/pro-regular-svg-icons',\n            '@fortawesome/free-brands-svg-icons'\n        ]\n    }\n\n})\n

\n

/plugins/fontawesome.js

\n

import { defineNuxtPlugin } from '#app';\n\n/** Fontawesome for Nuxt 3\n * https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt \n * \n*/\n\n// import the fontawesome core\nimport { library, config } from '@fortawesome/fontawesome-svg-core'\n\n// import font awesome icon component \nimport { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'\n\n// import specific icons \nimport { fas } from '@fortawesome/free-solid-svg-icons'\n\n// This is important, we are going to let Nuxt worry about the CSS\nconfig.autoAddCss = false\n\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  console.log('[Plugin]', 'Font Awesome')\n  \n  // You can add your icons directly in this plugin. See other examples for how you\n  // can add other styles or just individual icons.\n  library.add(fas);\n\n  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)\n})\n

\n

<template>\n  <header class="header">\n    <Logo />\n\n    coffee <font-awesome-icon icon="fas coffee" /> \n    flag <font-awesome-icon icon="fas fa-flag" />\n    search <font-awesome-icon icon="fas fa-magnifying-glass" />\n    search 2 <font-awesome-icon icon="fa-solid fa-magnifying-glass" />\n\n    <nav>\n      <nuxt-link :to="{ path: '/' }">\n        Home\n      </nuxt-link>\n      <nuxt-link :to="{ path: '/getting-started' }">\n        Getting Started\n      </nuxt-link>\n      <nuxt-link :to="{ path: '/faq' }">\n        FAQ\n      </nuxt-link>\n      <nuxt-link :to="{ path: '/search' }">\n        <font-awesome-icon icon="fas fa-magnifying-glass" />\n      </nuxt-link>\n    </nav>\n\n  </header>\n</template>\n

\n

问题\n当我启动 npx nuxi dev 并通过 localhost 查看页面时，图标出现 1 秒，然后不再可见。我已经寻找解决方案很长一段时间了，因为我无法立即找到错误。

\n

警告 - 控制台

\n

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

\n

Answer 1

您可以将组件包装在 a 中<client-only>，因此它仅呈现客户端。

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