使用unplugin-vue-components/vite全局挂载组件，如何设置相同格式的组件名？

Question

vite+vue3,使用vite+vue3，使用unplugin-vue-components/vite全局挂载组件遇到的问题。

生成components.d.ts文件，目前的内容是：declare module '@vue/runtime-core' {

export interface GlobalComponents {
Affix: typeof import('./../src/components/affix/src/affix.vue')['default']
Arrow: typeof import('./../src/components/popper/src/arrow.vue')['default']
Autocomplete: typeof import('./../src/components/autocomplete/src/autocomplete.vue')['default']
Avatar: typeof import('./../src/components/avatar/src/avatar.vue')['default']
Backtop: typeof import('./../src/components/backtop/src/backtop.vue')['default']
}
}

当前 unplugin-vue-components/vite全局挂载组件的组件名是以.vue文件名生成的，组件名与.vue文件名一致

如何设置可以将所有的组件名以xx开头，例如：el-affix，el-button等

Answer 1

好像不能使用component中export的name属性，只能使用文件名。如果统一加前缀，可以这样做：

Components({
      resolvers: [
        AntDesignVueResolver(),
        (componentName) => {
          // P是你的前缀
          if (componentName.startsWith('P')) {
            const name = componentName.slice(1)
            // 返回原始组件路径
            return path.resolve(`src/components/${name}/src/${name}.vue`)
          }
        },
      ],
    })