vue3 中页面使用setup语法糖定义页面名称无效问题

在进行页面缓存时，需要配合页面名称使用。但是在使用setup语法糖写逻辑就会发现直接在script中的name属性定义组件名是无效的，有两种解决方法：

一、在页面多添加一个script标签用于定义页面名称

// 多定义一个script标签，用于定义页面名称
<script lang="ts">
export default {
    name: 'Home',
}
</script>

<script setup lang="ts">
 // 页面逻辑
</script>

二、在每个页面都添加一个script比较麻烦，有时候没注意容易忘记添加导致页面缓存没加成功，如果项目是使用vite的话，可以使用vite插件解决这个问题

npm i vite-plugin-vue-setup-extend

// 或

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

在vite.config.ts文件中进行配置 

import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend-plus'

export default defineConfig({
    plugins: [ VueSetupExtend() ]
})

 在vite配置文件中配置完成之后，可以直接在script中写name这个时候就能实现。

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