当我们不使用setup语法糖时,我们可以以上形式设置name
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'xxx',
setup(){}
})
</script>
当我们使用setup语法糖的时候,我们可以借助unplugin-vue-define-options
插件帮助我们设置name
npm i unplugin-vue-define-options或者yarn add unplugin-vue-define-options
// 如果你使用了ts,则需要设置这一步,否则跳过
// tsconfig.json文件中
{
"compilerOptions":{
"types": [..., "unplugin-vue-define-options/macros-global"]
}
}
// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite';
export default defineConfig({
plugins: [
...,
DefineOptions()
]
})
在xxx.vue中使用
<script lang="ts" setup>
defineOptions({
name: 'xxx'
})
</script>
注意以下官网的提示