vue3使用setup语法糖时无法定义组件name？使用vite-plugin-vue-setup-extend解决，但无效？

在vue3中提倡使用setup语法糖，setup语法糖虽然好用，却也带来了一些问题，如：如何定义组件的name

在vue2中使用如下方式定义组件的name：

export default {
	name:'DemoComponent' // 组件name
}

vue3中在使用setup语法糖时，如何定义组件的name，有以下两种方式：

第一种：通过定义两个script标签，一个用vue2的方式定义组件name，另一个使用setup语法糖

<script>
export default {
	name:'DemoComponent' // 组件name
}
</script>
<script setup></script>

第二种：使用 vite-plugin-vue-setup-extend 插件来解决：

• 第一步：安装vite-plugin-vue-setup-extend 插件：

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

• 第二步：在vite.config.js 中引入（ts也一样）

import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
// https://vitejs.dev/config/
export default defineConfig({
	plugins: [vue(),vueSetupExtend()],
})

如果是ts写的，还需要在tsconfig.json中添加如下代码：

// tsconfig.json
  "compilerOptions": {
    "types": ["unplugin-vue-define-options"]
  }

必须要注意的是当组件的script标签中的内容为空时，name还是不会生效，如下：
name无效：

<script setup name="DemoComponent">
</script>

name有效：

<script setup name="DemoComponent">
// test
</script>