在vue3中，因为使用了setup语法，在script标签中不能直接定义组件的名字。下面提供两种方式来设置组件的名字。
方式一 使用defineOptions
如果是vue3.3+，可以直接在script中使用defineOptions来定义组件名字。
<script setup>
defineOptions({name: '组件名字'
})
</script>
方式二 使用vite-plugin-vue-setup-extend插件
vite-plugin-vue-setup-extend
要求：
- node version: >=12.0.0
- vite version: >=2.0.0
安装插件：
yarn add vite-plugin-vue-setup-extend -D
or
npm i vite-plugin-vue-setup-extend -D
在vite.config.ts里面配置插件, 导入插件并export
import { defineConfig, Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'export default defineConfig({plugins: [vue(), vueSetupExtend()],
})
配置好后可以在script里面写name属性来定义组件的名字。
<template><div>hello world {{ a }}</div>
</template><script lang="ts" setup name="App">const a = 1
</script>
说明：
该vite-plugin-vue-setup-extend插件作者许久未更新了，在高版本的node或vue中会有问题，issue始终未处理，所以最好选方式一。
另外我在node v22.14.0安装该插件时有报错，下面贴出来日志，因为我使用的是vue 3.5.25，所以并没有使用该插件。具体解决方案应该是降级node版本。
80 silly placeDep ROOT @vue/compiler-sfc@3.5.26 OK for: vite-plugin-vue-setup-extend@0.4.0 want: ^3.2.29
81 verbose stack TypeError: Cannot read properties of null (reading 'matches')
81 verbose stack at Link.matches (E:\nvm\v22.14.0\node_modules\npm\node_modules\@npmcli\arborist\lib\node.js:1117:41)
81 verbose stack at Link.canDedupe (E:\nvm\v22.14.0\node_modules\npm\node_modules\@npmcli\arborist\lib\node.js:1071:15)
81 verbose stack at PlaceDep.pruneDedupable (E:\nvm\v22.14.0\node_modules\npm\node_modules\@npmcli\arborist\lib\place-dep.js:426:14)
81 verbose stack at new PlaceDep (E:\nvm\v22.14.0\node_modules\npm\node_modules\@npmcli\arborist\lib\place-dep.js:278:14)
81 verbose stack at #buildDepStep (E:\nvm\v22.14.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:920:18)
81 verbose stack at async Arborist.buildIdealTree (E:\nvm\v22.14.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:181:7)
81 verbose stack at async Promise.all (index 1)
81 verbose stack at async Arborist.reify (E:\nvm\v22.14.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:131:5)
81 verbose stack at async Install.exec (E:\nvm\v22.14.0\node_modules\npm\lib\commands\install.js:150:5)
81 verbose stack at async Npm.exec (E:\nvm\v22.14.0\node_modules\npm\lib\npm.js:207:9)
82 error Cannot read properties of null (reading 'matches')
83 silly unfinished npm timer reify 1766939710463
84 silly unfinished npm timer reify:loadTrees 1766939710467
85 silly unfinished npm timer idealTree:buildDeps 1766939711045
86 silly unfinished npm timer idealTree:node_modules/vite-plugin-vue-setup-extend 1766939711819
87 verbose cwd E:\code\IdeaProjects\VueProjects\hello
88 verbose os Windows_NT 10.0.26200
89 verbose node v22.14.0
90 verbose npm v10.9.2
91 verbose exit 1
92 verbose code 1
93 error A complete log of this run can be found in: C:\Users\jw\AppData\Local\npm-cache\_logs\2025-12-28T16_35_09_918Z-debug-0.log