Vue3的setup语法糖是个好东西，但使用setup语法带来的第一个问题就是无法自定义name，而我们使用keep-alive往往是需要name的，解决这个问题通常是通过写两个script标签来解决，一个使用setup，一个不使用，但这样必然是不够优雅的。
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
export default defineComponent({
name: 'OrderList'
})
</script>
<script lang="ts" setup>
onMounted(() => {
console.log('mounted===')
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
这时候借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题，不用写两个script标签，可以直接在script标签上定义name。
安装
npm i vite-plugin-vue-setup-extend -D
1
配置
// vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
plugins: [
VueSetupExtend()
]
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
使用
<script lang="ts" setup name="OrderList">
import { onMounted } from 'vue'
onMounted(() => {
console.log('mounted===')
})
</script>
1
2
3
4
5
6
7
2
3
4
5
6
7
