介绍

vue-element-plus-admin 项目的icon采用线上图标, 打包后部署在纯内网环境无法渲染icon, 使用此插件可以在 build 时候将用到的icon动态打包到项目中

0.0.5 版本适配了 vben v2版本

安装

1npm install vite-plugin-iconify-vue-offline

使用

vite.config.ts

在 vite.config.ts 中引入并配置到plugins

1import type { UserConfig, ConfigEnv } from 'vite'
2import Vue from '@vitejs/plugin-vue'
3// 引入vite-plugin-iconify-vue-offline插件
4import Icon from 'vite-plugin-iconify-vue-offline'
5
6export default ({ command, mode }: ConfigEnv): UserConfig => {
7    let env = {} as any
8    const isBuild = command === 'build'
9    if (!isBuild) {
10        env = loadEnv(process.argv[3] === '--mode' ? process.argv[4] : process.argv[3], root)
11    } else {
12        env = loadEnv(mode, root)
13    }
14    return {
15        base: env.VITE_BASE_PATH,
16        plugins: [
17            // 在这里配置vite-plugin-iconify-vue-offline插件
18            Icon(),
19            Vue({
20                script: {
21                // 开启defineModel
22                defineModel: true
23                }
24            }),
25            VueJsx()
26            ......
27        ]
28        
29        ......
30    }
31})

main.ts

在 main.ts 中引入 virtual:icon

1...
2
3// 引入 virtual:icon
4import 'virtual:icon'
5
6...
7

最后在build阶段就会将用到的 icon 打包进去