element-plus及图标+vite全局导入/按需导入

工具版本

（1）软件工具：IntelliJ IDEA 2021.1 x64、
（2）框架："vite": "^5.4.10","vue": "^3.5.12",
（3）依赖：

"@element-plus/icons-vue": "^2.3.1","element-plus": "^2.8.7","unplugin-auto-import": "^0.18.3","unplugin-icons": "^0.20.1","unplugin-vue-components": "^0.27.4",

全局导入

(1)引入依赖

npm install element-plus --save
npm install @element-plus/icons-vue

（2）main.js配置

import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router/index'

const app = createApp(App)
 app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(createPinia())
app.use(router)
app.mount('#app')

(3)配置后重启项目便可使用

按需导入

（1）依赖引入

---在全局导入的依赖基础上额外导入

//按需导入element插件
npm install -D unplugin-vue-components unplugin-auto-import unplugin-icons

（2）vite.config.js按需引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import path from "path";

const pathSrc = path.resolve(__dirname, 'src')
// https://vite.dev/config/
export default defineConfig({
  //scss预编译处理
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler',
      }
    }
  },
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue'],
      resolvers: [
        ElementPlusResolver(),
        // 自动导入图标组件
         IconsResolver({
           prefix: 'Icon',
         }),
      ],
      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        // 自动注册图标组件
         IconsResolver({
          enabledCollections: ['ep'],
         }),
      ],
      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),
     Icons({
       autoInstall: true,
     }),
  ],
  resolve: {
    alias: {
      '@': pathSrc
    }
  },
  server: {
    port: 8081,
    open: false,
    proxy: {
      '/api': {
        target: 'http://localhost:8085',
      }
    }
  }
})

(3)重启项目尝试使用

（4）注意点一

我使用的是idea开发，该开发软件并未正确识别文件引入，实际上该导入是生效的

node_modules依赖库查看

注意点二

我配置的按需引入图标并未生效，最终采用了按需引入element-plus + 全局引入icons图标的形式

您的发现及意见

有存在错误或发现按需引入图标并未生效的原因，可及时回复我。