在Vue3中使用Element Plus时 el-icon无法显示的问题

最新推荐文章于 2025-09-04 14:44:16 发布

原创最新推荐文章于 2025-09-04 14:44:16 发布 · 912 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

html 同时被 2 个专栏收录

55 篇文章

订阅专栏

前端

54 篇文章

订阅专栏

在Vue项目中，作者遇到了Element Plus Icons无法显示的问题。通过官方文档安装icons后，在模板中直接使用仍报错。为解决此问题，作者在组件script中导入了所需的图标，并在data中定义，最终成功显示了图标。这个解决方案对于遇到类似问题的Vue开发者具有参考价值。

问题描述

按照官方文档安装了icons

$ npm install @element-plus/icons

然后在页面中使用

<template>
  <!-- <Header /> -->
 
  <!-- Icon 图标 -->
  <el-icon><edit /></el-icon>
  <el-icon><fold /></el-icon>
  <el-icon><aim /></el-icon>

  <!-- SVG 图标 -->
  <edit style="width: 1em; height: 1em; margin-right: 8px" />
  <share style="width: 1em; height: 1em; margin-right: 8px" />
  <delete style="width: 1em; height: 1em; margin-right: 8px" />
  <search style="width: 1em; height: 1em; margin-right: 8px" />
</template>

无法显示：

runtime-core.esm-bundler.js?5c40:6584 
        
 [Vue warn]: Failed to resolve component: edit
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>

在这里插入图片描述

解决方案

添加引用

<script>
//组件script
import { Fold } from "@element-plus/icons";
import { Edit } from "@element-plus/icons";
import { Aim } from "@element-plus/icons";
import { Share } from "@element-plus/icons";
import { Search } from "@element-plus/icons";
import { Delete } from "@element-plus/icons";

export default {
  components: {
    Fold,
    Edit,
    Aim,
    Share,
    Search,
    Delete,
  },
  data() {
    return {
    };
  },
};
</script>

显示正常了。
在这里插入图片描述