当前位置：首页 > news >正文

Element组件如何按需导入

news 来源：原创 2025/6/20 16:45:52

一、按需导入的原因：

对应Element组件，官方提供了全套导入的方法，那我们为什么要进行按需导入呢？因为在实际开发中，我们并不是每个组件都会用到，实现按需导入后，我们可以只导入我们需要的组件，在开发完成后的打包过程中，就可以达到减小我们项目包体积的目的。

二、实现方式：

（1）依照官方文挡进行操作：

这边我给出了对应官方文档的超链接：按需导入点这~ 。官网中是去修改.babelrc 文件，然后在main.js中添加需要使用到的组件。但是我在开发过程中，因为使用的vite版本原因，并未找到.babelrc文件，于是我变采用了方式（2）中方法来实现按需导入。

（2）引入扫描插件实现按需导入

首先我们安装两个插件：

npm install -D unplugin-vue-components unplugin-auto-import

unplugin-vue-components：自动扫描并注册 Vue 组件，无需手动引入每个组件。
unplugin-auto-import：自动导入 API 和组件，减少手动导入的工作量。
这些插件通过分析代码，只导入实际使用的组件和 API，从而减少最终打包体积。

然后我们在vite.config.js文件中进行如下添加修改：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],