Vite配置自动导入API以及组件库组件

前言

开发时，有些诸如ref、reactive、路由相关等API 和常用组件，使用前必须导入，这些导入语句没有意义而且占用过多行代码，容易造成阅读困难。

可以使用插件实现自动导入，使代码更加简洁。本文以 Vite 和 Element Plus 举例，其他组件库也可以从本文介绍的插件中直接使用。

配置

下载 unplugin-auto-import/vite 插件

npm install unplugin-auto-import -D

vite.config.ts 进行配置

import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      // 自动导入 Vue 相关函数，如 ref、computed 等
      imports: ['vue', 'vue-router'],
      // 生成 `auto-imports.d.ts` 文件，为自动导入的 API 提供类型支持，如果不配置默认在项目更目录下创建该文件
      dts: 'src/auto-imports.d.ts',
      // 自定义自动导入的模块
      dirs: [
        './src/composables', // 自动导入 `src/composables` 目录下的模块
      ],
      // 配置自动导入的文件名和扩展名
      eslintrc: {
        enabled: true, // 默认关闭，设置为 true 自动生成 ESLint 配置文件
        filepath: './.eslintrc-auto-import.json', // 配置文件路径
      },
    }),
  ],
}

参数说明：

imports: 指定要自动导入的库，如 [‘vue’, ‘vue-router’]。
dts: 指定生成的类型声明文件路径，为自动导入的 API 提供类型支持。如果不配置，默认会在项目根目录下创建类型声明文件。不小心删除该文件不用担心，每次 npm run dev 启动项目后，会自动生成该文件。
dirs: 指定需要自动导入的模块目录，如 src/composables、src/api。
eslintrc: 自动生成 ESLint 配置，避免 ESLint 报错。

使用时无需导入，即可使用

<template>
  <div>home</div>
</template>

<script setup>
const n = ref(0)
const o = reactive({})
const router = useRouter()
</script>

组件库配置

使用组件库时通常需要考虑打包优化，最常见的方式是按需导入以及分包，下面介绍按需导入并且使用时无需导入。

下载插件

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

vite.config.ts 进行配置

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'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver({
	      importStyle: 'sass',  // 使用按需加载的 Sass 样式
	    })], // 自动导入 Element Plus 的 API
      imports: ['vue', 'vue-router'],  
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // 将 Element Plus 单独打包
          if (id.includes('node_modules/element-plus')) {
            return 'element-plus'
          }
        },
      },
    },
  },
})

如上配置后，使用时便无需导入组件，如果需要使用配套 icons，需要额外配置。

确保已经下载icons

pnpm install @element-plus/icons-vue

下载自动导入的插件

pnpm install -D  unplugin-icons

// .....
import Icons from "unplugin-icons/vite"
import IconsResolver from "unplugin-icons/resolver"

export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  const config = loadEnv(mode, "./")

  return {
    ...
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver(), IconsResolver()],
        imports: ["vue", "vue-router"],
        dts: "./src/types/auto-imports.d.ts",
      }),
      Components({
        resolvers: [
          ElementPlusResolver(),
          IconsResolver({ enabledCollections: ["ep"] }),
        ],
        dts: "./src/types/components.d.ts",
      }),
      // 自动安装图标
      Icons({
        compiler: "vue3", // 编译方式
        autoInstall: true,
      }),
    ],
  }
})