vue3.3+通过defineOptions来定义组件名字

在vue3中，因为使用了setup语法，在script标签中不能通过export直接定义组件的名字。下面提供两种方式来设置组件的名字。

方式一 使用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