如何在Vue项目中创建类似C#项目dll的子模块并实现运行时导入

以下方案完全匹配通用客户看板的定制化需求，可根据团队实际开发模式选型：

方案1：ES模块动态导入 + 约定式组件覆盖 #

最轻量的实现方案，适合定制逻辑与主项目同仓库迭代、定制需求较少的场景：

• 先在通用看板代码中预留所有可扩展点位，每个点位先实现通用默认组件/逻辑，同时增加动态判断逻辑
• 定制子模块按约定规则存放，比如src/custom-modules/[客户唯一标识]/下的组件、逻辑文件和通用模块的命名保持一致
• 运行时根据当前登录客户的标识，通过import()语法动态尝试加载对应定制模块，加载成功则使用定制逻辑，加载失败自动降级为通用逻辑
• 示例代码：

// 通用组件动态加载方法
async function loadCustomerComponent(componentName, customerId) {
  try {
    // 尝试加载客户定制组件
    const customModule = await import(`@/custom-modules/${customerId}/components/${componentName}.vue`)
    return customModule.default
  } catch(e) {
    // 无定制组件时降级加载通用组件
    const commonModule = await import(`@/common/components/${componentName}.vue`)
    return commonModule.default
  }
}

• 打包时通过Vite/Webpack的动态导入配置，可将所有定制模块拆分为独立chunk，不会打入主包，只有对应客户访问时才会按需加载。

方案2：独立构建UMD/ES模块 + 运行时远程加载 #

最贴近C# DLL能力的方案，适合定制子模块与主项目完全解耦、独立开发部署的场景：

• 每个客户的定制逻辑作为独立项目开发，最终打包为独立的UMD或ES模块包，部署到公司内部静态资源服务器
• 主项目运行时根据当前客户标识，动态加载对应定制模块的JS、CSS资源，加载完成后即可拿到定制组件、逻辑等导出内容
• 主项目和子模块通过peerDependencies共享Vue、组件库等公共依赖，避免重复打包依赖，减少子模块体积
• 示例代码（动态加载UMD模块）：

// 动态加载远程定制模块
function loadCustomModule(customerId) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = `https://静态资源服务地址/custom-modules/${customerId}/index.umd.js`
    script.onload = () => {
      // 子模块打包时配置导出挂载到window对应字段上
      resolve(window[`CustomModule_${customerId}`])
    }
    script.onerror = reject
    document.body.appendChild(script)
  })
}

• 如果目标浏览器支持远程ES模块导入，也可以直接用import(远程模块地址)的方式加载，不需要手动创建script标签，仅需配置静态资源的CORS规则允许主项目域名访问即可。

方案3：Monorepo + Vue插件机制 #

适合有大量客户定制模块、需要统一管理依赖和版本的场景：

• 用pnpm monorepo把主项目和所有定制子模块放在同一个仓库管理，每个定制子模块是独立的workspace，遵循Vue插件规范开发
• 定制子模块对外暴露install方法，内部可以注册定制组件、注入自定义业务逻辑、覆盖通用看板的默认配置
• 既可以选择主项目只打包通用逻辑，运行时动态安装对应客户的定制插件；也可以在CI阶段根据不同客户的部署需求，把对应定制模块预先打包到主包中做静态部署。

选型参考 #

• 定制需求少、迭代节奏和主项目同步：选方案1，改造成本最低
• 定制团队和主项目团队分开、定制模块迭代频率高：选方案2，完全解耦互不影响
• 需要管理数十个以上客户的定制模块：选方案3，方便统一维护、管控版本

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