未找到 @vue-icons/feather 依赖项答案

【问题标题】：@vue-icons/feather dependency was not found未找到 @vue-icons/feather 依赖项
【发布时间】：2022-01-01 12:12:41
【问题描述】：

我正在处理一个简单的 Nuxt 项目，我安装了 Vue Icons 并尝试向我的组件添加搜索图标，但是在编译时出现以下错误：

This dependency was not found:                                                                                                                                                 
                                                                                                                                                                               
* @vue-icons/feather in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/SiteHeader.vue?vue&type=script&lang=js&       
                                                                                                                                                                              
To install it, you can run: npm install --save @vue-icons/feather

但我已经在我的 src 和函数文件夹中安装了它（我在 firebase 上托管）

"dependencies": {
  "@nuxtjs/firebase": "^7.6.1",
  "@vue-icons/feather": "^1.0.19",
  "firebase": "^8.9.1",
  "isomorphic-fetch": "^3.0.0",
  "nuxt": "^2.0.0"
}

我使用的导入语句是直接从网站复制的那个

import { SearchIcon } from "@vue-icons/feather";

我读到的一些类似问题谈到了transpiling the library，但这似乎不起作用，我是否需要将第 3 方库添加到 nuxt.config 文件的其他部分？

【问题讨论】：

您好，如果我的答案解决了您的问题，请随时为我的答案投票！

标签： vue.js nuxt.js

【解决方案1】：

我会引用文档中写的内容

该项目旨在为 Vue 3 重新组合 [...] 常用图标包。

Nuxt2 与 Vue3 不兼容。

如果您想使用完全相同的vue-feather-icons 库，请为此使用this package。

它应该像工作一样简单

<template>
  <div>
    <ActivityIcon />
  </div>
</template>

<script>
import { ActivityIcon } from 'vue-feather-icons'

export default {
  components: {
    ActivityIcon
  }
}
</script>

否则，我还可以推荐unplugin-icons，它将提供更多功能并且非常灵活。其中还完全包含the icons you're looking for。

很棒的包，不必处理在其他功能之上查找工作包的所有烦人部分。

【讨论】：