如何在AngularJS项目中使用Vue3组件/路由实现增量迁移？

我在2023年做过完整的同场景迁移，目前线上业务运行稳定，以下是可直接复用的落地方案：

基础组件接入逻辑 #

• 首先在原有AngularJS项目依赖中安装vue@3.x，不需要改动原有构建链，只要你的现有构建工具支持ES6模块语法即可，低版本构建工具可额外配置babel转译vue的ESM产物
• 封装一个通用的AngularJS directive作为Vue组件的挂载容器，核心逻辑如下：

  angular.module('yourApp').directive('vueWrapper', function() {
    return {
      scope: {
        component: '<',
        props: '<'
      },
      link: function(scope, element) {
        // 创建Vue实例
        const app = createApp(scope.component, scope.props || {})
        // 挂载到dom
        app.mount(element[0])
        // AngularJS作用域销毁时同步销毁Vue实例
        scope.$on('$destroy', () => {
          app.unmount()
        })
      }
    }
  })
  

• 业务使用时直接在AngularJS模板中调用：<vue-wrapper component="你的Vue组件" props="要传入的参数对象"></vue-wrapper>

路由共存方案 #

• 保留原有AngularJS路由规则，给Vue路由分配独立的路由前缀，比如/vue/*
• 原有AngularJS路由中新增一条通配规则，所有匹配/vue/*的请求都指向同一个占位模板，模板中只需要写<vue-wrapper component="Vue根路由组件"></vue-wrapper>
• Vue侧单独引入vue-router，配置路由的base参数为之前分配的前缀，路由模式建议先用hash模式避免和AngularJS路由冲突，后续全量迁移完成后再切history模式

跨框架能力共享 #

• 服务端请求能力可以直接复用AngularJS原有逻辑：把封装好的$http请求方法挂载到app.config.globalProperties上，Vue组件内可以直接调用；如果要逐步重构，可以单独封装axios请求实例，两边共用同一套拦截、鉴权逻辑
• 全局状态共享：简单场景直接用Vue3的ref/reactive创建全局状态实例，AngularJS和Vue侧都可以直接读写；复杂场景可以接入pinia，AngularJS侧需要修改状态时直接调用pinia暴露的action方法即可

核心踩坑提示 #

不要将Vue实例直接挂载到AngularJS的scope对象上，会触发两边响应式系统的互相干扰，导致内存泄漏
跨框架传递非基础类型参数时，尽量做深拷贝后再传，避免两边的响应式代理互相影响
路由切换、组件销毁时必须同步触发Vue实例的unmount方法，否则会出现组件重复挂载、事件绑定残留的问题

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