Vue项目如何抽离公共部分为模块实现多版本差异化复用？

完全可以实现类似安卓开发的公共模块抽离复用，而且Vue生态有非常成熟的落地路径，完全可以替代多分支维护、单文件堆判断逻辑的高成本方案，以下是经过大量多版本项目验证的可行方案，按落地成本从低到高排序：

方案1：基础组件+插槽抽离（优先推荐，适合局部区块差异场景） #

这是最轻量、改造成本最低的方案，适配你提到的「仅部分内容有差异、其余完全一致」的绝大多数场景：

• 核心思路：把所有版本公共的模板、逻辑全部抽成独立的基础组件，所有存在版本差异的位置预留具名作用域插槽，公共逻辑（比如用户信息拉取、通用跳转、通用表单校验）全部在基础组件内维护，同时通过插槽把组件内部的状态、方法暴露给外层。
• 不同版本的业务页面只需要引入这个公共基础组件，仅覆写自己有差异的插槽内容即可，无差异的部分直接复用基础组件的默认内容，不需要重复写任何代码。

基础组件示例代码：

<!-- 公共组件: components/BaseUserCenter.vue -->
<template>
  <div class="user-center-wrap">
    <!-- 全版本一致的公共头部，直接在基础组件内维护 -->
    <div class="uc-header">
      <img class="avatar" :src="userInfo.avatar" />
      <div class="nickname">{{ userInfo.nickname }}</div>
    </div>

    <!-- 差异区域1：预留具名插槽，通过作用域传出内部用户等级数据 -->
    <slot name="vipEntry" :userLevel="userInfo.level">
      <!-- 插槽默认内容：无定制需求的版本直接用这块，不需要额外传内容 -->
      <div class="default-vip-entry">普通会员入口</div>
    </slot>

    <!-- 全版本一致的公共菜单区 -->
    <div class="uc-menu">
      <div @click="goAccountSecurity">账号与安全</div>
      <div @click="goNotificationSetting">消息通知设置</div>
    </div>

    <!-- 差异区域2：预留底部自定义区域插槽 -->
    <slot name="customFooter"></slot>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 所有公共逻辑统一在基础组件维护，单点更新全版本生效
const userInfo = ref({})
const fetchUserInfo = async () => {
  // 公共用户信息请求逻辑
}
const goAccountSecurity = () => {
  // 公共跳转逻辑
}
const goNotificationSetting = () => {
  // 公共跳转逻辑
}
onMounted(() => fetchUserInfo())
</script>

新版本业务页面示例，仅需要写差异部分：

<!-- 新版本页面: views/v2/UserCenter.vue -->
<template>
  <BaseUserCenter>
    <!-- 只覆写有差异的VIP入口区域，其他内容全部复用基础组件 -->
    <template #vipEntry="{ userLevel }">
      <div class="new-version-vip-banner">
        新版本专属SVIP通道，当前等级：{{ userLevel }}
        <button @click="goSvipPage">立即开通</button>
      </div>
    </template>
  </BaseUserCenter>
</template>
<script setup>
import BaseUserCenter from '@/components/BaseUserCenter.vue'
// 新版本专属逻辑单独写在这里，不会污染公共组件
const goSvipPage = () => {
  // 新版本专属跳转逻辑
}
</script>

• 方案优势：公共代码单点维护，修改一次所有版本自动同步；差异代码完全隔离，不会出现大量版本判断的冗余逻辑；学习成本极低，不需要引入额外依赖。

方案2：Composable 抽离公共逻辑（适合逻辑差异较多的场景） #

如果不同版本的差异不仅包含模板，还涉及部分核心逻辑的区别，可以把公共逻辑抽成独立的组合式函数：

• 核心思路：将用户中心模块的公共状态、通用接口请求、工具方法全部抽离为useUserCenter composable，不同版本的.vue文件按需引入这个函数拿到公共能力，自行实现模板和差异化逻辑。
• 如果模板重复度高，完全可以和方案1的插槽机制结合使用，灵活度更高。

公共逻辑抽离示例：

// composables/useUserCenter.js
import { ref, onMounted } from 'vue'
export default function useUserCenter() {
  const userInfo = ref({})
  const fetchUserInfo = async () => { /* 公共请求逻辑 */ }
  const goAccountSecurity = () => { /* 公共跳转逻辑 */ }
  onMounted(() => fetchUserInfo())
  return {
    userInfo,
    fetchUserInfo,
    goAccountSecurity
  }
}

方案3：构建时差异化文件替换（适合多客户定制、多发行版场景） #

如果你的项目存在大量并行版本（比如多个客户定制版、国内/海外不同发行版），可以配合构建工具的路径别名、环境变量能力实现构建时自动替换差异文件：

• 核心思路：公共组件统一放在common/components目录，不同版本的差异组件按版本号放在独立目录下，构建对应版本时通过配置修改路径别名优先级，让构建工具自动加载对应版本的差异文件，业务代码中不需要写任何版本判断逻辑。
• 整个项目只需要维护一个代码分支，公共代码全局复用，差异代码按目录隔离，不会互相干扰。

原有方案的核心问题规避 #

• 多分支维护的核心痛点是公共代码存在多份副本，修改需要同步所有分支，以上所有方案的公共代码都只保留一份，从根源上避免了同步成本；
• 单文件堆版本判断的核心痛点是差异逻辑和公共逻辑强耦合，以上方案的差异代码全部拆分为独立块/独立文件，公共逻辑中不会出现任何针对特定版本的判断代码，没有冗余。

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