Vue3结合Ionic时组件下推一级挂载无渲染无报错问题咨询

问题场景 #

未将业务组件直接挂载到#app节点，而是采用一级嵌套的结构，目的是从HTML文件向组件传递props。实际运行时页面无任何内容渲染，控制台无报错输出，初步判断是对Vue3createApp运行逻辑的理解存在偏差。

相关代码 #

• HTML文件代码：

<div id="app">
  <my-component />
</div>

• 主JS文件代码：

import { createApp } from 'vue'
import MyComponent from './pages/MyComponent.vue'
import { IonicVue } from '@ionic/vue'

const app = createApp({
  components: {
    MyComponent: {
      props: {
      },
    }
  },
})
.use(IonicVue)
.mount("#app");

问题原因 #

代码存在两个核心问题，直接导致异常现象：

• 虽然在文件顶部导入了真实的MyComponent单文件组件，但在根组件配置中注册MyComponent时，传入的是一个空配置对象{ props: {} }，没有引用导入的真实组件，相当于注册了一个无模板、无渲染逻辑的空壳组件。
• 未给根组件配置template选项时，Vue会默认将挂载节点#app的innerHTML作为根组件模板。空壳组件没有任何渲染输出，因此页面不会显示内容，也不会抛出错误。

修正方案 #

方案1：保留HTML内写组件标签的写法（适配从HTML传props的需求） #

注册组件时直接引用已导入的真实组件，替换空配置即可：

import { createApp } from 'vue'
import MyComponent from './pages/MyComponent.vue'
import { IonicVue } from '@ionic/vue'

const app = createApp({
  components: {
    // 直接绑定导入的真实组件，不要传入空配置
    MyComponent
  },
})
.use(IonicVue)
.mount("#app");

注意：该写法依赖Vue的运行时编译器，Vite等构建工具创建的Vue项目默认使用runtime-only版本，会提示缺少编译器的报错，可在构建配置中指定使用带编译器的Vue版本，以Vite为例：

// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js'
    }
  }
})

方案2：将业务组件直接作为根组件挂载（常规项目推荐写法，无需额外配置） #

如果不需要在静态HTML层面给组件传递props，可直接将导入的单文件组件作为根组件传入createApp，不需要在HTML中书写组件标签：

import { createApp } from 'vue'
import MyComponent from './pages/MyComponent.vue'
import { IonicVue } from '@ionic/vue'

// 直接将单文件组件作为根组件
const app = createApp(MyComponent)
.use(IonicVue)
.mount("#app");

对应HTML可简化为：

<div id="app"></div>

该写法使用默认runtime-only版本的Vue即可正常运行，单文件组件模板会在构建阶段提前编译，运行性能更优。 #

内容的提问来源于stack exchange，提问作者Adam Robertson