【Vue】vue3 中通过 setup 定义组件的 name 属性

在 vue3 中因为使用了 组合式api 不再需要配置name 属性 但是有时候我们的文件名常以 index.vue 命名 使用调试工具时当多个文件都以 index 显示时不太容易区分。因此通过插件配置 name 属性

安装插件

yarn add vite-plugin-vue-setup-extend -D

配置vite.config.js文件

// 导入插件包
import vueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
// 使用
  plugins: [vue(), vueSetupExtend()],
})

script 标签添加name属性

注意点：script 标签中必须要用内容 （注释也可以）

<script setup lang="ts" name="Login">
// 
</script>

vue3.3之后可以通过 defineOptions() 配置

<script setup lang="ts">
	defineOptions({
		name: 'Login'
	})
</script>