报错：has naming conflicts with other components, ignored

在 Vue 项目编译时，出现如下报错

[unplugin-vue-components] component "xxx"(xxx/Index.vue) has naming conflicts with other components, ignored.
[unplugin-vue-components] component "xxx"(xxx/Index.vue) has naming conflicts with other components, ignored.
[unplugin-vue-components] component "xxx"(xxx/Index.vue) has naming conflicts with other components, ignored.
[unplugin-vue-components] component "xxx"(xxx/Index.vue) has naming conflicts with other components, ignored.

因为本人的个人习惯，在写组件时，通常都是以 Index.vue 进行命名，造成项目拥有大量的同名文件而出现上述报错。

解决方案

为 unplugin-vue-components 插件配置 directoryAsNamespace 属性为 true 即可。

// vite.config.ts
plugins: [
    vue(),
    Components({
        // ... 其它配置
        // 允许子目录作为组件的命名空间前缀
        directoryAsNamespace: true
    })
]