Vue3.x中给组件添加name属性

对于 vue@3.2.34 及以上版本，在使用 <script setup> 的单文件组件时，vue 会根据组件文件名，自动推导出 name 属性。也就是名为 MyHome.vue 或 my-home.vue 的文件的， name 属性为 MyHome，而当你在组件内显示定义 name 属性时，会覆盖推导出的名称。

并且在某些特定场景下，name属性的自动推导也会失效，就像下图，views下都是文件夹包裹index.vue 的场景：

 

第一种解决方式，需要两个script标签：

# 稍显麻烦, 但写demo时很适用
<script lang="ts">
  export default {
    name: 'User'
  }
</script>
<script setup lang="ts"></script>

第二种解决方式，安装 vite-plugin-setup-extend 插件

1. 安装

npm i vite-plugin-vue-setup-extend -D

2. 配置 vite.config.js 

import vueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [
    vue(),
    vueSetupExtend()
})

3. 修改组件的<script>标签，注意至少添加一行注释，否则插件不生效

<script setup lang="ts" name="User">
# 这里至少有一行注释，否则插件不生效
</script>

End---------------------