Nuxt 3 Fontawesome 如何修复错误无法解决从“plugins ontawesome.js”导入“@fortawesome/free-solid-svg-icons”。文件存在吗？

Question

我按照 fontawesome 的文档将它们包含到我的 nuxt 3 项目中。 https://fontawesome.com/docs/web/use-with/vue/use-with

我安装了它

npm i --save @fortawesome/vue-fontawesome@latest-3

我也跑了

npm i --save @fortawesome/free-brands-svg-icons

和

npm i --save @fortawesome/fontawesome-svg-core

然后我创建了一个plugins/fontawesome.js 文件（我在这里四次检查了名称）并将以下代码放入其中：

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

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

// 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)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {})
})

我还将必要的代码添加到 nuxt.config.ts 中，所以它看起来像：

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss'],
  app: {
    head: {
      title: "PAN-Biotech",
      meta: [
        {name: 'description', content: 'Your Cellculture stuff'}
      ],
      link: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap'
        }
      ]
    }
  },
  css: [
    '@fortawesome/fontawesome-svg-core/styles.css'
  ]
})

现在的问题是，当我使用 npm run dev 启动它时，出现以下错误：

 ERROR  Failed to resolve import "@fortawesome/free-solid-svg-icons" from "plugins\fontawesome.js". Does the file exist?       

我在这里能做什么？我多次检查了文件夹和文件的名称，它们确实存在。

Answer 1

安装这些其他软件包：

对于 npm：

npm install @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

对于纱线：

yarn add @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons