多个Vue Single SPA应用同组件多版本冲突 如何实现组件局部注册

冲突根源为Vue全局注册API默认绑定在全局Vue实例上，不同子应用注册同名组件时会互相覆盖，可通过以下方案解决：

方案1：组件局部注册（优先推荐） #

完全放弃NPM包中的全局注册逻辑，改为导出组件本身，由每个子应用在自身业务代码中局部注册，注册的组件仅在当前业务组件的作用域内可用，完全不会跨应用冲突。

• NPM包侧调整：删除原有的全局注册逻辑，直接导出组件

// 原NPM包入口错误示例
import XxxComponent from './components/Xxx.vue'
Vue.component('xxx-component', XxxComponent)

// 修改后NPM包入口正确示例
export { default as XxxComponent } from './components/Xxx.vue'

• 子应用侧使用：在需要用到组件的业务代码中导入注册

// 选项式API写法
import { XxxComponent } from 'your-public-npm-package'
export default {
  components: {
    XxxComponent
  }
}

// <script setup>写法，导入即可直接使用
import { XxxComponent } from 'your-public-npm-package'

方案2：子应用独立Vue实例隔离 #

如果必须保留全局注册的使用习惯，可通过打包配置将Vue设置为子应用的私有依赖，每个子应用打包时会将对应版本的Vue打入自身bundle，不会复用全局Vue实例，各自的全局注册只会作用在自身的Vue实例上。
注意：该方案会导致页面加载多个Vue副本，整体包体积会上涨，仅适合子应用数量较少的场景

方案3：带应用标识的全局注册规避 #

如果既不想修改原有全局注册的使用习惯，也不想增加包体积，可以改造NPM包的注册逻辑，支持传入应用唯一标识作为组件前缀，避免重名覆盖：

// NPM包侧注册方法改造
export function registerComponents(appId, Vue) {
  const XxxComponent = require('./components/Xxx.vue').default
  Vue.component(`${appId}-xxx`, XxxComponent)
}

// 子应用1调用
import { registerComponents } from 'your-public-npm-package'
import Vue from 'vue'
registerComponents('app1', Vue)
// 页面内使用：<app1-xxx />

// 子应用2调用
import { registerComponents } from 'your-public-npm-package'
import Vue from 'vue'
registerComponents('app2', Vue)
// 页面内使用：<app2-xxx />

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