unplugin-auto-import 自定义导入路径 vue3+ts

unplugin-auto-import 是一个用于自动导入模块的 Vite 插件，可以帮助我们快速导入组件、函数、变量等等。以下是在 Vue 3 + TypeScript 项目中使用 unplugin-auto-import 自定义导入路径的步骤：

1. 安装所需依赖：

npm install -D vite-plugin-auto-import

2. 在构建配置中添加插件，并配置自定义导入：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 配置需要自动导入的模块
      imports: [
        {
          // 导入组件
          path: 'vue',
          // 定义导入的名称
          imports: ['defineComponent'],
        },
        {
          // 导入自定义组件
          path: '@/components/MyCustomComponent.vue',
          // 定义导入的名称
          imports: ['MyCustomComponent'],
        },
        {
          // 导入函数
          path: 'lodash/debounce',
          // 定义导入的名称
          imports: ['debounce'],
        },
        {
          // 导入变量
          path: '@/config',
          // 定义导入的名称
          imports: ['appConfig'],
        },
      ],
    }),
  ],
})

3. 在代码中使用自定义导入的模块：

<template>
  <MyCustomComponent />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { debounce } from 'lodash'
import { appConfig } from '@/config'
import { MyCustomComponent } from '@/components/MyCustomComponent.vue'

export default defineComponent({
  components: {
    MyCustomComponent,
  },
  data() {
    return {
      searchText: '',
    }
  },
  methods: {
    search: debounce(() => {
      console.log('searchText:', this.searchText)
    }, 500),
  },
})
</script>

注意：在使用 unplugin-auto-import 插件时，需要在 tsconfig.json 文件中开启 "esModuleInterop": true，以支持模块导入。