如何在大型遗留Dojo项目中逐步集成Vue并实现迁移？

这种渐进式迁移方案完全可行，是大型遗留项目重构的标准路径——既能保证业务持续运行，又能逐步完成技术栈切换，最终实现纯Vue独立运行。以下是具体落地步骤：

一、环境准备：让Vue与Dojo和平共存 #

1. 引入Vue依赖

   • 如果项目用Webpack/Rollup等现代打包工具，直接通过npm安装Vue，配置打包规则时将Vue代码与Dojo代码做隔离（比如分开打包成不同chunk）。
   • 如果是旧的Dojo AMD项目，用Vue CLI将Vue组件打包成UMD格式，通过<script>标签引入到页面，避免全局变量冲突（UMD会自动适配AMD/CommonJS/全局环境）。

2. 隔离全局作用域

   • 避免Vue和Dojo的全局对象冲突，可通过IIFE包裹Vue代码，或给Vue组件指定独立命名空间：

     // 打包Vue组件时指定UMD命名空间
     // vue.config.js示例
     module.exports = {
       configureWebpack: {
         output: {
           library: 'VueLegacyComponents',
           libraryTarget: 'umd',
           umdNamedDefine: true
         }
       }
     };
     

二、核心实现：在Dojo中使用Vue组件（以为例） #

1. 编写并打包Vue组件 #

先实现基础的Vue按钮组件：

<!-- src/vue/components/VButton.vue -->
<template>
  <button 
    :class="['v-btn', { 'v-btn--disabled': disabled }]"
    :disabled="disabled"
    @click="handleClick"
  >
    {{ label }}
  </button>
</template>

<script>
export default {
  props: {
    label: { type: String, required: true },
    disabled: { type: Boolean, default: false },
    propA: { type: String },
    propB: { type: Number }
  },
  methods: {
    handleClick() {
      this.$emit('btn-click', { propA: this.propA, propB: this.propB });
    }
  }
};
</script>

<style scoped>
.v-btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; }
.v-btn--disabled { opacity: 0.6; cursor: not-allowed; }
</style>

用Vue CLI打包后，得到vue-components.umd.js，引入到Dojo项目的页面中。

2. 在Dojo Widget中挂载Vue组件 #

假设是Dojo AMD风格的Widget，通过DOM容器挂载Vue实例：

define(['dojo/_base/declare', 'dojo/dom-construct', 'dojo/on'], function(declare, domConstruct, on) {
  return declare(null, {
    postCreate: function() {
      // 创建Vue组件的DOM容器
      const vueBtnContainer = domConstruct.create('div', {}, this.domNode);

      // 初始化Vue实例，挂载<VButton>
      this.vueBtnInstance = new Vue({
        el: vueBtnContainer,
        template: `
          <v-button 
            label="提交" 
            :prop-a="dojoPropA" 
            :prop-b="dojoPropB" 
            @btn-click="onVueBtnClick"
          ></v-button>
        `,
        data() {
          return {
            dojoPropA: '来自Dojo的参数A',
            dojoPropB: 123
          };
        },
        methods: {
          onVueBtnClick(payload) {
            // 将Vue组件的事件传递给Dojo处理
            console.log('Vue按钮触发点击', payload);
            this._handleDojoBusiness(payload);
          },
          _handleDojoBusiness(payload) {
            // 这里写Dojo的业务逻辑
          }
        },
        components: {
          VButton: VueLegacyComponents.VButton // 引用UMD打包的组件
        }
      });
    },

    // 与Dojo生命周期对齐，销毁Vue实例避免内存泄漏
    destroy: function() {
      if (this.vueBtnInstance) {
        this.vueBtnInstance.$destroy();
        this.vueBtnInstance = null;
      }
      this.inherited(arguments);
    }
  });
});

三、状态与通信：实现两者双向协作 #

1. 状态共享：用一个全局的纯对象或简易状态管理器（比如手写发布订阅），让Dojo和Vue都能读写状态并监听变化：

   // 全局状态容器
   window.LegacyState = {
     userInfo: null,
     listeners: [],
     setUserInfo(info) {
       this.userInfo = info;
       this.listeners.forEach(fn => fn(info));
     },
     subscribe(fn) {
       this.listeners.push(fn);
     }
   };
   

   Dojo中调用LegacyState.setUserInfo()，Vue中通过mounted钩子订阅状态变化，反之亦然。

2. 事件通信：Vue组件通过$emit触发事件，Dojo实例监听；Dojo的事件则可以通过调用Vue实例的方法或直接修改data传递给Vue。

四、渐进替换与最终独立 #

1. 替换策略：

   • 先从独立的基础组件（按钮、输入框、弹窗）开始替换，再逐步替换页面模块，最后替换路由和全局状态。
   • 每个模块替换完成后，验证功能正常，再移除对应的Dojo代码。

2. 最终独立运行：

   • 当所有Dojo模块都被替换后，移除Dojo相关依赖、AMD配置和旧的打包脚本。
   • 将项目切换到纯Vue的构建流程（Vue CLI/Vite），调整路由、状态管理为Vue生态的方案，即可实现独立运行。

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