如何在浏览器环境中将Vue组件同步转为HTML字符串？

问题背景 #

我需要在浏览器环境中将Vue单文件组件（SFC）同步转换为HTML字符串，用于传入父类构造函数（仅接受HTML字符串参数）。尝试过vue-test-utils v1的renderToString方法，但它返回Promise，无法满足同步需求。

现有代码 #

Bubble.vue 组件 #

<script setup lang="ts">

</script>

<template>
  <div hinted-name="wrapper-bubble" class="hinted-bubble-wrapper">
    <div class="hinted-bubble-frame" hinted-name="frame"></div>
  </div>
</template>

<style scoped lang="stylus">

</style>

BubbleStepView 类 #

export class BubbleStepView extends StepComponentView {
  constructor() {
    super(Bubble.toString);
  }
}

解决方案 #

在浏览器环境中，可以利用Vue的createApp配合原生DOM操作实现同步转换，步骤如下：

1. 创建临时DOM容器用于挂载组件
2. 同步挂载Vue组件到临时容器
3. 提取容器的innerHTML作为HTML字符串
4. 清理临时容器和Vue实例避免内存泄漏

实现代码 #

import { createApp } from 'vue';
import Bubble from './Bubble.vue';

// 同步获取组件HTML字符串的工具函数
function getComponentHtmlSync(component) {
  const tempContainer = document.createElement('div');
  // 创建并挂载Vue应用
  const app = createApp(component);
  app.mount(tempContainer);
  // 获取渲染后的HTML
  const html = tempContainer.innerHTML;
  // 卸载应用并移除临时元素
  app.unmount();
  tempContainer.remove();
  return html;
}

// 修改后的BubbleStepView类
export class BubbleStepView extends StepComponentView {
  constructor() {
    super(getComponentHtmlSync(Bubble));
  }
}

注意事项 #

• 该方法仅适用于静态组件（无异步数据依赖、无异步生命周期钩子），如果组件需要等待异步操作渲染内容，同步转换无法获取完整结果。
• 确保Vue 3已正确引入（因为组件使用了<script setup>语法），且SFC已通过构建工具（如Vite、Vue CLI）编译为浏览器可执行的代码。

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