Vue3中defineComponent创建的组件无法显示问题求助

你遇到的问题核心是Vue3默认使用运行时版本（runtime-only），不支持编译字符串模板，而你用defineComponent创建HelloWorld2时使用了字符串模板，导致组件无法被编译渲染；同时<script setup>对这种方式创建的组件的处理逻辑，和导入的单文件组件（SFC）不同，进一步影响了渲染效果。

下面提供三种可行的解决思路，按需选择：

方法一：启用运行时编译器（支持字符串模板） #

如果坚持要用字符串模板，需要配置项目启用Vue的运行时编译器：

• Vue CLI项目：在项目根目录的vue.config.js中添加配置：

module.exports = {
  runtimeCompiler: true
}

• Vite项目：先安装运行时编译器依赖：

npm install @vue/runtime-compiler

然后在vite.config.js中修改插件配置：

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

export default defineConfig({
  plugins: [vue({
    template: {
      compiler: require('@vue/runtime-compiler')
    }
  })]
})

方法二：改用渲染函数（无需运行时编译器，更轻量） #

用Vue的h渲染函数替代字符串模板，直接生成虚拟DOM，避免模板编译步骤，同时注意手动导入Vuetify组件：

<template>
  <HelloWorld />
  <HelloWorld2 />
</template>

<script setup lang="ts">
import { defineComponent, h } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'
// 手动导入Vuetify的文本框组件
import VTextField from 'vuetify/components/VTextField'

const HelloWorld2 = defineComponent({
  render() {
    return h('div', [
      'Hello World 2',
      h(VTextField, { label: 'Label' })
    ])
  }
});
</script>

方法三：改用单文件组件（最规范，推荐） #

直接创建HelloWorld2.vue单文件组件，和HelloWorld的方式一致，彻底避免模板编译问题：

HelloWorld2.vue #

<template>
  <div>Hello World 2</div>
  <v-text-field label="Label"></v-text-field>
</template>

<script setup lang="ts">
// 这里可以添加组件逻辑
</script>

父组件中导入使用 #

<template>
  <HelloWorld />
  <HelloWorld2 />
</template>

<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
import HelloWorld2 from '@/components/HelloWorld2.vue'
</script>

额外注意：如果项目使用Vuetify，确保组件自动导入功能正常，或者手动导入所需组件，否则v-text-field也可能无法正常渲染。

内容的提问来源于stack exchange，提问作者Wilson Wu