Vue2/Vue3 monorepo中如何动态切换Fragment与template标签？

你的问题核心在于：Vue3的<template>是模板占位符而非可被<component>渲染的组件，直接把'template'传给:is会被识别为原生HTML标签，无法实现Fragment效果。以下是针对monorepo场景的可行方案：

1. 封装通用Fragment组件 #

基于vue-demi做版本判断，在Vue2时复用vue-frag的Fragment组件，Vue3时直接利用原生多根节点支持（无需额外组件）。

方式一：单文件组件写法 #

<!-- 共享包中创建：src/components/UniversalFragment.vue -->
<template>
  <!-- Vue2环境使用vue-frag的Fragment -->
  <Fragment v-if="isVue2">
    <slot />
  </Fragment>
  <!-- Vue3环境直接渲染插槽内容（原生支持多根节点） -->
  <template v-else>
    <slot />
  </template>
</template>

<script>
import { version } from 'vue-demi'
// 仅在Vue2环境会实际引入vue-frag
import { Fragment } from 'vue-frag'

export default {
  components: { Fragment },
  computed: {
    isVue2() {
      return version.startsWith('2.')
    }
  }
}
</script>

方式二：渲染函数写法（更轻量化） #

// 共享包中创建：src/components/UniversalFragment.js
import { defineComponent, version, h } from 'vue-demi'
import { Fragment as Vue2Fragment } from 'vue-frag'

export default defineComponent({
  setup(_, { slots }) {
    // 根据Vue版本返回不同渲染结果
    if (version.startsWith('2.')) {
      return () => h(Vue2Fragment, null, slots.default)
    } else {
      // Vue3中直接返回插槽内容，自动以Fragment形式渲染
      return () => slots.default?.() || []
    }
  }
})

2. 在业务代码中使用 #

直接用封装好的通用组件代替原来的<component>写法，无需关注Vue版本：

<table>
  <tr>
    <td>
      <UniversalFragment>
        <span>节点A</span>
        <span>节点B</span>
        <!-- 任意多节点 -->
      </UniversalFragment>
    </td>
  </tr>
</table>

3. 依赖配置注意事项 #

• Vue2项目需单独安装vue-frag：npm install vue-frag或yarn add vue-frag
• 共享包中把vue-frag设为peer依赖（在package.json中添加），避免重复安装：

  "peerDependencies": {
    "vue-frag": "^1.5.1"
  }
  

为什么原写法不生效？ #

Vue3的<template>是模板语法的一部分，仅在编译阶段生效，不是一个可被<component>实例化的组件。当你把:is设为'template'时，Vue会渲染原生HTML<template>标签，该标签默认不会渲染内部内容，自然无法实现Fragment的效果。

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