如何正确挂载Vue3的In-DOM根组件模板？

AI 小北

2026-8-14

Vue3 In-DOM Root Component Template 问题解决方案

问题原因

你的代码无法正常渲染，核心原因有两个：

Vite默认使用Vue运行时版本：该版本不包含模板编译器，无法编译In-DOM中的HTML模板内容，导致根组件无法生成渲染内容，最终挂载后清空#app元素。
根组件配置未触发模板读取：即使使用完整版Vue，空根组件createApp({})在某些场景下需要显式配置，确保Vue读取挂载元素的innerHTML作为模板。

修复步骤

1. 切换到Vue完整版（含编译器）

在项目根目录创建或修改vite.config.js，配置别名指向Vue的完整版：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js'
    }
  }
})

2. 修正main.js的根组件配置

两种可选写法，效果一致：

写法一：利用Vue自动读取挂载元素模板

保持根组件为空对象，Vue会自动将#app的innerHTML作为根模板：

import { createApp } from 'vue'
import './style.css'
import HelloWorld from './components/HelloWorld.vue'

const app = createApp({})

app.component('HelloWorld', HelloWorld)

app.mount('#app')

写法二：显式指定根模板

通过template选项明确指向#app元素，可读性更强：

import { createApp } from 'vue'
import './style.css'
import HelloWorld from './components/HelloWorld.vue'

const app = createApp({
  template: '#app'
})

app.component('HelloWorld', HelloWorld)

app.mount('#app')