vue-cli项目自动导入Element Plus与unplugin-icons报错的修复方案

问题根源 #

你在vue.config.js中导入IconsResolver的路径错误，unplugin-icons的图标解析器导出路径是unplugin-icons/resolvers（复数形式），而非unplugin-icons/resolver。同时你注释了AutoImport插件，若要实现图标组件的自动导入，需要启用该插件并配合配置。

修复步骤 #

1. 修正导入与配置内容 #

修改你的vue.config.js文件，修正IconsResolver的导入路径，并启用AutoImport插件：

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const Icons = require('unplugin-icons/webpack')
const { IconsResolver } = require('unplugin-icons/resolvers') // 修正导入路径和方式

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [
          ElementPlusResolver(),
          IconsResolver({
            prefix: 'Icon',
            enabledCollections: ['ep']
          }),
        ],
      }),
      Components({
        resolvers: [
          IconsResolver({ enabledCollections: ["ep"] }),
          ElementPlusResolver(),
        ],
      }),
      Icons({ autoInstall: true }),
    ],
  }
})

2. 清理依赖缓存并重启项目 #

执行以下命令清理缓存并重新启动项目：

rm -rf node_modules package-lock.json
npm install
npm run serve

验证修复 #

项目启动后，你可以直接在组件中使用Element Plus的组件和图标，无需手动导入，例如：

<template>
  <el-button type="primary">
    <IconEpEdit />
    编辑
  </el-button>
</template>

内容的提问来源于stack exchange，提问作者yzhengwei