1.package.json

"dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "element-plus": "^2.3.7",
},
"devDependencies": {
    "@iconify-json/ep": "^1.1.11",
    "unplugin-auto-import": "^0.16.4",
    "unplugin-icons": "^0.16.3",
    "unplugin-vue-components": "^0.25.1",
}

2.vite.config.js

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' // 自動導入
import Components from 'unplugin-vue-components/vite' // 組件注冊
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'

// 自動導入element圖標
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

import { resolve } from 'path'

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    base: './',
    plugins: [
      vue(),
      AutoImport({
        // 自動導入 Vue 相關函數(shù)，如：ref, reactive, toRef 等
        imports: ['vue'],
        resolvers: [
          // 自動導入element plus相關函數(shù)（帶樣式）
          ElementPlusResolver(),
          // 自動導入圖標組件
          IconsResolver({
            prefix: 'Icon',
            enabledCollections: ['ep']
          })
        ]
      }),
      Components({
        // 要搜索組件的目錄的相對路徑。默認 ['src/components']
        dirs: ['src'],
        // 組件的有效文件擴展名。
        extensions: ['vue'],
        // 搜索子目錄
        deep: true,
        resolvers: [
          // 自動導入element plus組件
          ElementPlusResolver(),
          NaiveUiResolver(),
          // 自動注冊圖標組件
          IconsResolver({
            prefix: 'i',
            enabledCollections: ['ep']
          })
        ]
      }),
      Icons({
        compiler: 'vue3',
        autoInstall: true
      })
    ],
    resolve: {
      // 配置路徑別名
      alias: {
        '@': resolve(__dirname, './src'),
        'api': resolve(__dirname, './src/api'),
        'views': resolve(__dirname, './src/views'),
        'utils': resolve(__dirname, './src/utils'),
        'comp': resolve(__dirname, './src/components'),
        'assets': resolve(__dirname, './src/assets')
      },
      extensions: ['.js', '.ts', '.vue', '.json', '.less', '.css']
    },
    define: {
      'process.env': {
        VITE_APP_BASE_API: env.VITE_APP_BASE_API
      }
    },
    server: {
      host: '0.0.0.0',
      port: 3000, // 端口
      open: false, // 啟動項目后打開瀏覽器
      hot: true,
      overlay: {
        warning: false,
        error: true
      },
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: 'https://devestate.yyepark.com/',
          ws: true,
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace('^' + [env.VITE_APP_BASE_API], '')
        }
      }
    }
  }
})

3.使用圖標前面加上：<i-ep-xxx />

<el-icon><i-ep-CloseBold /></el-icon>

?4.路由中使用

<el-icon v-if="childItem.meta && childItem.meta.icon">

????????<component :is="childItem.meta.icon" />

</el-icon>

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '../layout/index.vue'
import { markRaw } from 'vue'

export const asyncRoutes = [
? {
? ? path: '/',
? ? name: 'HomePage',
? ? component: Layout,
? ? redirect: '/home',
? ? children: [
? ? ? {
? ? ? ? path: 'home',
? ? ? ? name: 'Home',
? ? ? ? component: () => import('@/views/Home/index.vue'),
? ? ? ? meta: { title: '首頁', icon: markRaw(IconEpMenu) }?//markRaw
? ? ? }
? ? ]
? }
]文章來源地址http://www.zghlxwxcb.cn/news/detail-612664.html

到了這里，關于vue3+vite路由中使用element自動導入圖標的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！