前言：

? ? ? ? react在使用antd的時候，也是需要每個組件都在界面上按需引入的，那能不能自動生成，按需使用呢？我們這里說一說這個。

安裝插件，組件按需引入

unplugin-antd-resolver

unplugin-auto-import

npm install unplugin-antd-resolver unplugin-auto-import -D

配置：vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import AutoImport from 'unplugin-auto-import/vite';
import AntdResolver from 'unplugin-antd-resolver';export default defineConfig({plugins: [react(),AutoImport({resolvers: [AntdResolver()], // 自動導入 Ant Design 的組件和 Hook}),],css: {preprocessorOptions: {less: {javascriptEnabled: true, // 必須開啟，用于 antd 的 less 變量解析},},},
});

界面上使用：不用單獨引入也可以使用了

return (<><Button type="primary">按鈕</Button> {/* 自動引入 Button */}{message.success('成功')} {/* 自動引入 message */}</>);

圖標按需引入 ：unplugin-icons/resolver

@iconify/json

unplugin-icons

unplugin-auto-import

npm install @iconify/json unplugin-icons unplugin-auto-import -D

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import AutoImport from 'unplugin-auto-import/vite';export default defineConfig({plugins: [react(),AutoImport({resolvers: [IconsResolver({ prefix: 'Icon' }), // 圖標自動導入，前綴為 Icon],}),Icons({ compiler: 'jsx', autoInstall: true }), // 圖標編譯為 JSX],
});

界面上使用 ：直接使用圖標（通過約定前綴?Icon?+ 圖標名）

function App() {return (<><IconCarbonSun /> {/* 自動引入 Carbon 太陽圖標 */}<IconMdiAccount /> {/* 自動引入 Material Design 用戶圖標 */}</>);
}

組合使用

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import AutoImport from 'unplugin-auto-import/vite';
import AntdResolver from 'unplugin-antd-resolver';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';export default defineConfig({plugins: [react(),AutoImport({imports: ['react'], // 自動引入 React 的 Hooksresolvers: [AntdResolver(), // Ant Design 按需導入IconsResolver({ prefix: 'Icon' }), // 圖標按需導入],dts: 'types/auto-imports.d.ts', // 生成類型聲明文件}),Icons({ compiler: 'jsx', autoInstall: true }), // 圖標配置],css: {preprocessorOptions: {less: {javascriptEnabled: true, // antd 需要},},},
});

生成的auto.imports.d.ts

如果這個文件沒有自動生成，運行下服務，重新啟動就行

項目中使用源碼：

vite里面的plugins

import AutoImport from 'unplugin-auto-import/vite'
import AntdResolver from 'unplugin-antd-resolver'
import IconsResolver from 'unplugin-icons/resolver'export default function setupAutoImport() {return AutoImport({resolvers: [AntdResolver(), IconsResolver()],imports: ['react', 'react-router-dom', {'react-i18next': ['initReactI18next', 'useTranslation'],}],dirs: ['src/components/**'],dts: 'types/auto-imports.d.ts',})
}