FontAwesome 6 + Nuxt 3“找不到一个或多个图标{前缀：'fab'，iconName：'facebook'} {}”

Question

一直在尝试将 FontAwesome 添加到 Nuxt 3 / Tailwind 样板中。一切正常，Facebook 图标出现了！但服务器控制台给出了这个错误：

\n

\xe2\x9c\x94 Vite server hmr 12 files in 446.295ms                                                        18:11:42\nCould not find one or more icon(s) { prefix: \'fab\', iconName: \'facebook\' } {}\n

\n

在浏览器控制台中：

\n

[Vue warn]: Hydration node mismatch:\n\n- Client vnode: svg \n- Server rendered DOM: <!---->  \n  at <FontAwesomeIcon icon= (2)\xc2\xa0[\'fab\', \'facebook\'] > \n  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > \n  at <RouteProvider key="/" routeProps= {Component: {\xe2\x80\xa6}, route: {\xe2\x80\xa6}} pageKey="/"  ... > \n  at <FragmentWrapper > \n  at <RouterView name=undefined route=undefined > \n  at <NuxtPage> \n  at <Default > \n  at <LayoutLoader key="default" name="default" hasTransition=false > \n  at <FragmentWrapper > \n  at <NuxtLayout> \n  at <App key=2 > \n  at <NuxtRoot>\n

\n

我按照指示从这里到达点开始。其他图标也会出现这种情况，而且它们都来自免费的 font-awesome 版本。

\n

〜/package.json：

\n

{\n  "private": true,\n  "scripts": {\n    "dev": "nuxi dev",\n    "build": "nuxi build",\n    "start": "node .output/server/index.mjs",\n    "lint": "eslint --ext .ts,.js,.vue .",\n    "test": "vitest",\n    "coverage": "vitest run --coverage"\n  },\n  "devDependencies": {\n    "@headlessui/vue": "^1.7.12",\n    "@nuxt/devtools": "^0.2.5",\n    "@nuxtjs/color-mode": "^3.2.0",\n    "@nuxtjs/eslint-config-typescript": "^12.0.0",\n    "@pinia/nuxt": "^0.4.7",\n    "@tailwindcss/aspect-ratio": "^0.4.2",\n    "@tailwindcss/container-queries": "^0.1.0",\n    "@tailwindcss/forms": "^0.5.3",\n    "@tailwindcss/line-clamp": "^0.4.2",\n    "@tailwindcss/typography": "^0.5.9",\n    "@vitest/coverage-c8": "^0.29.2",\n    "@vueuse/nuxt": "^9.13.0",\n    "eslint": "^8.35.0",\n    "nuxt": "^3.2.3",\n    "nuxt-headlessui": "^1.1.1",\n    "nuxt-icon": "^0.3.2",\n    "nuxt-vitest": "^0.6.6",\n    "pinia": "^2.0.33",\n    "tailwindcss": "^3.2.7",\n    "typescript": "^4.9.5"\n  },\n  "dependencies": {\n    "@fortawesome/fontawesome-svg-core": "^6.3.0",\n    "@fortawesome/free-brands-svg-icons": "^6.3.0",\n    "@fortawesome/vue-fontawesome": "^3.0.3",\n    "pnpm": "^7.29.1",\n    "vitest": ">=0.29.0 <1",\n    "vue": "3.2.47"\n  }\n}\n

\n

〜/plugins/fontawesome.js：

\n

import { library, config } from \'@fortawesome/fontawesome-svg-core\'\nimport { FontAwesomeIcon } from \'@fortawesome/vue-fontawesome\'\nimport { faFacebook } from \'@fortawesome/free-brands-svg-icons\'\nlibrary.add(faFacebook)\n\n// This is important, we are going to let Nuxt worry about the CSS\nconfig.autoAddCss = false\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.component(\'font-awesome-icon\', FontAwesomeIcon, {})\n})\n

\n

〜/ nuxt.config.ts：

\n

export default defineNuxtConfig({\n  modules: [\n    \'@vueuse/nuxt\',\n    \'@pinia/nuxt\',\n    \'@nuxtjs/color-mode\',\n    \'nuxt-icon\',\n    \'nuxt-headlessui\',\n    \'nuxt-vitest\'\n    // \'@nuxt/devtools\'\n  ],\n  experimental: {\n    reactivityTransform: true\n  },\n  css: [\n    \'~/assets/css/tailwind.css\',\n    \'@fortawesome/fontawesome-svg-core/styles.css\'\n  ],\n  postcss: {\n    plugins: {\n      tailwindcss: {},\n      autoprefixer: {}\n    }\n  },\n  colorMode: {\n    classSuffix: \'\'\n  },\n  headlessui: {\n    prefix: \'\'\n  },\n  plugins: [\n    { src: "~/plugins/fontawesome.js", ssr: false} \n  ]\n})\n

\n

然后在模板中显示：

\n

<font-awesome-icon :icon="[\'fab\', \'facebook\']" />\n

\n

我究竟做错了什么？

\n

谢谢

\n

Answer 1

最终成为 nuxt.config.ts 中的一行：

build: {
  transpile: ['@fortawesome/vue-fontawesome']
},

来源： https: //github.com/FortAwesome/vue-fontawesome/issues/215

这解决了错误...