Vue3 在setup中定义name属性

方法1

新增一个script标签， 在这个script标签定义一个name属性（注意多个script使用时 lang的值要一致）

<script lang="ts">
export default {
  name: 'Layout'
}
</script>
<script setup lang="ts"></script>

方法2 使用unplugin-vue-define-options插件

1. 安装插件 yarn add unplugin-vue-define-options -D
2. 集成插件 在vite.config.ts文件引入插件unplugin-vue-define-options

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import DefineOptions from 'unplugin-vue-define-options/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), DefineOptions()],
})

3. 集成完成之后，那么可以直接使用了，如果在TypeScript中报错了（比如在d.ts的配置文件中加入描述）

<script setup lang="ts">
  defineOptions({
    name: 'Layout'
  })
</script>
<template>
  <div>layout</div>
</template>
<style lang="less" scoped></style>

方法3(推荐) 使用 vite-plugin-vue-setup-extend插件

1. 安装插件 yarn add vite-plugin-vue-setup-extend -D
2. 集成插件 在vite.config.ts文件引入vite-plugin-vue-setup-extend

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'

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

在vue3使用异步组件时会失效，我通常会搭配方法1使用 转载来自 这里