vite一些插件介绍

1、vite-plugin-svg-icons： vite加载本地svg图片，用于生成 svg 雪碧图，方便在项目中使用 .svg 文件。 按照文档配置好后，搭配阿里巴巴矢量图标库使用，只需把下载好的 svg 文件丢到指定目录，然后就可以项目中愉快的使用了。

具体使用方法： www.jianshu.com/p/aad7faa39…

2、 vite-plugin-purge-icons ： www.kuxiaoxin.com/archives/69

vite版使用Iconify
将我们所使用的Iconify图标都已html的dom节点形式保存在html中，这样我们就可以不发送http请求就可以使用图标了。

main.ts

import '@purge-icons/generated'

3、自动导入第三方库API - unplugin-auto-import：自动生成auto-import.d.ts

//vite.config.js

//自动导入常用的第三方库的API（比如vue中的ref）
import AutoImport from 'unplugin-auto-import/vite'

plugins: [
 AutoImport({
        // Auto import functions from Vue, e.g. ref, reactive, toRef...
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue','vue-router']
    }),
]

4、vue自动注册引入组件unplugin-vue-components：自动生成components.d.ts

//vite.config.js

//在Vue文件中自动注册引入组件（包括项目自身的组件和各种组件库中的组件）
import Components from 'unplugin-vue-components/vite'

plugins: [
    Components({
        // relative paths to the directory to search for components.
        dirs: ['src/**/components']
    })
]

5、ElementPlusResolver： elementPlus Api自动导入，elementPlus组件自动注册

//vite.config.js

//自动导入常用的第三方库的API（比如vue中的ref）
import AutoImport from 'unplugin-auto-import/vite'

//在Vue文件中自动注册引入组件（包括项目自身的组件和各种组件库中的组件）
import Components from 'unplugin-vue-components/vite'

//按需自动导入element
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

plugins: [
     AutoImport({
        // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        resolvers: [
            ElementPlusResolver(),
        ],
    }),
    Components({
        resolvers: [
            // Auto register Element Plus components
            // 自动导入 Element Plus 组件
            ElementPlusResolver()  //不包含icon
        ],
    }),
]

6、unplugin-icons/vite：数以千计的图标作为组件按需访问
IconsResolver:自动注册icon组件

//vite.config.js

//按需导入icon
import Icons from 'unplugin-icons/vite'  //以千计的图标作为组件按需访问
//自动import icon 组件
import IconsResolver from 'unplugin-icons/resolver'

plugins: [
 Icons({
    autoInstall: true,//自动安装用到的图标
    })
Components({
    resolvers: [
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver(),
    ]
})]

完整vite.config.js

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import { loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'

//按需导入icon
import Icons from 'unplugin-icons/vite'  //以千计的图标作为组件按需访问

//自动import icon 组件
import IconsResolver from 'unplugin-icons/resolver'

//自动导入常用的第三方库的API（比如vue中的ref）
import AutoImport from 'unplugin-auto-import/vite'

//在Vue文件中自动注册引入组件（包括项目自身的组件和各种组件库中的组件）
import Components from 'unplugin-vue-components/vite'

//按需自动导入element
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

// 当前执行node命令时文件夹的地址(工作目录)
const root = process.cwd()


// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfig => {
    let env = {} as any
    const isBuild = command === 'build'
    if (!isBuild) {
        env = loadEnv((process.argv[3] === '--mode' ? process.argv[4] : process.argv[3]), root)
    } else {
        env = loadEnv(mode, root)
    }

    return {
        plugins: [
            vue(),
            AutoImport({
                // Auto import functions from Vue, e.g. ref, reactive, toRef...
                // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
                imports: ['vue','vue-router'],

                // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
                // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
                resolvers: [
                    ElementPlusResolver(),
                ],
            }),
            Components({
                // relative paths to the directory to search for components.
                dirs: ['src/**/components'],

                resolvers: [
                    // Auto register icon components
                    // 自动注册图标组件
                    IconsResolver(),

                    // Auto register Element Plus components
                    // 自动导入 Element Plus 组件
                    ElementPlusResolver()  //不包含icon
                ],
            }),
            Icons({
                autoInstall: true,//自动安装用到的图标
            })
        ],
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url))
            }
        },
        server: {
            // 是否开启 https
            https: false,
            // 端口号
            port: env.VITE_PORT,
            host: "0.0.0.0",
            open: env.VITE_OPEN === 'true',
            // 本地跨域代理. 目前注释的原因：暂时没有用途，server 端已经支持跨域
            proxy: {
                ['/api']: {
                    target: env.VITE_BASE_URL,
                    ws: false,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(new RegExp(`^/api`), ''),
                },
            },
        },
        // 全局 css 注册
        css: {
            preprocessorOptions: {
                scss: {
                    javascriptEnabled: true,
                    additionalData: `@import "src/styles/variables.scss";`
                }
            }
        }
    }
}