在 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})
]