如何在标准HTML页面实现Vue3组件与Vue2一致的渲染效果？

现有一套基于Vue 2.5+旧版Webpack构建的组件库，可直接在无Vue应用的HTML页面中使用。迁移到Vue 3后，无法实现和Vue 2一样的效果：Vue 2会挂载到#body元素上，仅替换其中的组件标签（如<test-component>），保留原有HTML内容；但Vue 3挂载后会清空#body的所有内容。

当前Vue 2入口文件：

import Vue from 'vue';
import Test from '../src/components/Test.vue';

Vue.component('test-component', Test);

new Vue({
  el: '#body'
});

示例HTML文件：

<html>
  <head>
  </head>
  <body>
    <div id="body">
      <div>This is in the HTML</div>
      <test-component></test-component>
    </div>
    <script src="dist/bundle.js"></script>
  </body>
</html>

Vue 2运行后，浏览器最终HTML（开发者工具中）：

<html><head>
  </head>
  <body>
    <div id="body"><div>This is in the HTML</div> <div>Hello from the Vue component!</div></div>
    <script src="dist/bundle.js"></script>
  

</body></html>

尝试的Vue 3入口文件：

import { createApp } from 'vue';
import Test from '../src/components/Test.vue';

const app = createApp();
app.component('test-component', Test);
app.mount('#body');

Vite打包配置：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import analyze from 'rollup-plugin-analyzer';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  define: {
    'process.env.NODE_ENV': '"production"'
  },
  build: {
    rollupOptions: {
      plugins: [analyze()]
    },
    lib: {
      entry: [
        './lib/bundle.js'
      ],
      name: 'MagicComponents',
      fileName: (format, entryName) => entryName + '.' + format + '.js'
    }
  }
})

Vue 3运行后，浏览器最终HTML：

<html><head>
  </head>
  <body>
    <div id="body"></div>
    <script src="dist/bundle.js"></script>
</body></html>

需求：在不将Vue 3组件转为Web Components的前提下，实现和Vue 2一致的效果。

要让Vue 3复刻Vue 2的挂载行为（保留目标元素原有内容并编译组件标签），可通过以下方式调整：

1. 修改入口文件，复用目标元素的innerHTML作为模板 #

Vue 3的app.mount()默认会清空目标元素内容，需要手动把原有内容作为根组件的模板。两种实现方式：

方式一：模板字符串写法 #

import { createApp } from 'vue';
import Test from '../src/components/Test.vue';

// 获取目标元素并保存原有HTML
const targetEl = document.getElementById('body');
const originHtml = targetEl.innerHTML;

// 创建根组件，将原有HTML作为模板
const app = createApp({
  template: `<div>${originHtml}</div>`
});
app.component('test-component', Test);
app.mount(targetEl);

方式二：渲染函数写法（更高效，无模板编译开销） #

import { createApp, h, resolveComponent } from 'vue';
import Test from '../src/components/Test.vue';

const targetEl = document.getElementById('body');
const childNodes = Array.from(targetEl.childNodes);

const app = createApp({
  render() {
    return h('div', {}, childNodes.map(node => {
      // 处理元素节点：如果是已注册的组件，渲染组件；否则保留原节点
      if (node.nodeType === Node.ELEMENT_NODE) {
        const component = resolveComponent(node.tagName.toLowerCase());
        if (component) {
          // 提取元素属性
          const attrs = {};
          Array.from(node.attributes).forEach(attr => {
            attrs[attr.name] = attr.value;
          });
          // 渲染组件，传入属性和子节点
          return h(component, attrs, Array.from(node.childNodes));
        }
      }
      // 文本/注释节点直接返回
      return node;
    }));
  }
});
app.component('test-component', Test);
app.mount(targetEl);

2. 调整Vite打包配置（可选） #

若组件库需要直接在浏览器中通过<script>引入，确保Vite输出兼容的格式：

build: {
  rollupOptions: {
    plugins: [analyze()]
  },
  lib: {
    entry: './lib/bundle.js',
    name: 'MagicComponents',
    formats: ['umd', 'iife'], // 输出浏览器可直接运行的格式
    fileName: (format, entryName) => entryName + '.' + format + '.js'
  }
}

核心原理 #

Vue 2的new Vue({ el: '#body' })会自动将目标元素的内容当作根组件模板编译；而Vue 3的app.mount()默认行为是清空目标元素并渲染根组件内容。通过手动复用目标元素的原有内容作为根组件的模板/渲染内容，即可实现和Vue 2完全一致的效果。

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