如何配置Nuxt 3让DevTools按文件路径命名组件？

我们的Nuxt 3项目采用如下组件结构：

components/
   MyButton/
      index.vue
      index.scss
      index.composable.vue

组件全局可正常使用（比如MyButton），但Vue DevTools的组件树里所有组件都显示为Index：

Index
   Index
   Index
      NuxtLink
   Index

这给调试工作造成了极大不便。

目前有一个可行但冗余的解决办法：给每个单文件组件（SFC）末尾添加如下脚本标签，手动指定组件名称：

<script lang="ts">
export default {
  name: 'MyButton',
};
</script>

我们希望直接通过Nuxt配置，让DevTools自动使用组件的完整相对路径作为显示名称（和引用组件时的命名逻辑一致），无需手动逐个设置。

尝试过编写Nuxt插件来修改组件名称，代码如下（plugins/fix-names.ts）：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.mixin({
    beforeCreate() {
      if (!import.meta.dev) return;
      const filePath = this.$options.__file as string; // 获取组件文件路径
      if (!filePath) return;

      // 只保留components/之后的路径部分
      const namePath = filePath.split('components/')[1]?.replace('.vue', '') || '';
      if (!namePath) return;

      const directories = namePath.split('/');
      const dirName = directories
        .map((dir) => `${dir.charAt(0).toUpperCase()}${dir.slice(1)}`)
        .join('');

      this.$options.name = dirName;
      this.$options.__name = dirName;
      console.log('Component name:', this.$options.name);
    },
  });
});

该插件能在控制台正确输出组件名称，但DevTools中的组件树显示并未改变。

内容的提问来源于stack exchange，提问作者cib