Vue3 setup 语法糖下如何定义组件名称 - 知乎

把import全部放到第一个script里面
第一个是普通的script*(注意加lang=ts)
第二个是setup

Vue3 中的 setup 语法糖确实是个好东西，用起来很甜，是糖没错。但是随之而来的问题就是无法自定义组件 name，而我们在使用 keep-alive 的时候，往往是需要用到 name 的，因此我们就需要一个方案来解决这个问题。

方案一：写两个 script 标签

最简单的方法就是写两个script 标签，一个用 setup 语法，一个不用 setup 语法，代码如下：

<script>
    export default {
        name: 'demo'
    }
</script>

<script setup>
    // do something...
</script>

方案二：通过插件

​插件名称：vite-plugin-vue-setup-extend

1、安装

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

2、配置 ( vite.config.ts )

import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
  plugins: [ VueSetupExtend() ]
})

3、使用

<script lang="ts" setup name="demo">

</script>

Vue3 setup 语法糖下如何定义组件名称 - 知乎