unplugin-vue-components 组件按文件名排除配置指南

在使用 unplugin-vue-components 插件时，开发者有时需要排除特定目录或文件中的组件，避免它们被自动导入。本文将详细介绍如何通过配置实现按文件名排除组件的功能。

问题背景

在 Vue 项目中，unplugin-vue-components 插件可以自动扫描并导入组件，极大提高了开发效率。但实际项目中，我们可能希望排除某些特定文件或目录中的组件不被自动导入。

解决方案

unplugin-vue-components 提供了 globs 配置项来实现文件级别的排除功能。通过 glob 模式匹配，可以精确控制哪些文件应该被包含或排除。

基本配置示例

// vite.config.js
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      globs: [
        '!src/components/**/excludes/*.vue', // 排除特定目录下的所有.vue文件
      ]
    })
  ]
})

配置说明

1. ! 前缀表示排除匹配的文件
2. ** 表示匹配任意层级的子目录
3. *.vue 匹配所有 Vue 单文件组件

进阶用法

可以组合多个 glob 模式来实现更复杂的排除逻辑：

globs: [
  'src/components/**/*.vue', // 包含所有组件
  '!src/components/deprecated/*.vue', // 排除deprecated目录
  '!src/components/**/*.spec.vue', // 排除所有测试组件
  '!src/components/**/__tests__/*.vue' // 排除测试目录
]

注意事项

1. 排除规则是有序的，后面的规则会覆盖前面的规则
2. glob 模式匹配是大小写敏感的
3. 在 Windows 系统上需要使用正斜杠(/)作为路径分隔符
4. 排除规则不会影响手动导入的组件

最佳实践

1. 对于临时不需要的组件，建议使用 exclude 选项通过组件名排除
2. 对于确定长期不需要的组件目录，使用 glob 模式排除更高效
3. 在大型项目中，合理的目录结构配合 glob 排除可以显著提升构建性能

通过合理配置 glob 排除规则，开发者可以更精细地控制 unplugin-vue-components 的自动导入行为，使项目结构更加清晰，构建过程更加高效。