在 Vite 中配置 Element Plus 自动按需导入，不再全局导入，减少打包体积。

之前多次在 Vite 中配置 Element Plus 自动按需导入，好像都没完全吃透其中原理，这次可能算是吃透了，所以做个记录。

在 Element Plus 快速开始 的按需导入小节有讲到如何给 Element Plus 配置按需导入。

我这里写个详细步骤，并分享一些踩坑经验。

安装步骤

步骤一：安装插件

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

说明一下 unplugin-auto-import 和 unplugin-vue-components 两个插件的区别。

  • AutoImport 插件：专门用于自动导入 JS/TS API 函数（即在 <script> 逻辑中使用的变量或方法，如 ref、ElMessage 等）。

  • Components 插件：专门用于自动导入 Vue 组件（即在 <template> 模板中使用的标签，如 <el-card>、<el-table> 等）。

步骤二：vite配置

在 vite.config.ts / vite.config.js 中配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      resolvers: [ElementPlusResolver()],
      dts: 'src/auto-imports.d.ts',
      eslintrc: { enabled: false },
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      dts: 'src/components.d.ts',
      dirs: ['src/components'],
      extensions: ['vue'],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  server: {
    host: '0.0.0.0',
    port: 5173,
  },
})

踩坑经验

1、ElMessage 缺少样式

在配置完 Element Plus 按需导入后，发现其消息提示组件缺少样式，经过排查，发现在vue组件中手动导入了 ElMessage 组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div></div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'

fetch('/api/users')
  .then((data) => {})
  .catch((err) => {
    ElMessage.error('请求失败')
  })
</script>

这种情况会导致 unplugin-auto-import 没有加载 ElMessage 的样式。

建议把所有手动导入 element-plus 中组件的代码都移除，让 unplugin-auto-import 自动按需导入。