如何用single-spa或微前端架构实现Quasar v1应用组件共享？

1. 将组件封装为独立UMD模块 #

Quasar v1原生支持打包UMD格式模块，适配Webpack 4环境，无需升级：

• 在组件项目的quasar.conf.js中配置构建目标：

  build: {
    target: 'umd',
    umd: {
      name: 'SharedQuasarComponents',
      exports: 'named'
    }
  }
  

• 执行quasar build后，dist/umd目录下会生成可被外部引入的JS文件，将该文件部署到静态资源服务或主应用的静态目录中。

2. 主应用通过Single-Spa注册远程组件 #

主应用（Quasar v1+Vue2）接入single-spa-vue实现组件加载：

• 安装依赖：npm install single-spa single-spa-vue
• 在主应用入口文件src/main.js中注册远程组件：

  import Vue from 'vue'
  import singleSpaVue from 'single-spa-vue'
  
  const vueLifecycles = singleSpaVue({
    Vue,
    appOptions: {
      el: '#shared-component-container',
      render: h => h(SharedQuasarComponents.TargetComponent)
    }
  })
  
  singleSpa.registerApplication(
    'shared-quasar-component',
    () => import('http://your-static-host/path/to/SharedQuasarComponents.umd.js'),
    location => location.pathname.includes('/use-shared') // 按路由规则触发加载
  )
  
  singleSpa.start()
  

• 在主应用页面预留挂载节点：<div id="shared-component-container"></div>

3. 轻量替代方案：全局变量直接共享 #

若不想接入single-spa，可通过全局变量实现组件共享：

• 在主应用index.html中引入UMD打包文件：

  <script src="http://your-static-host/path/to/SharedQuasarComponents.umd.js"></script>
  

• 在主应用Vue实例中注册全局组件：

  Vue.component('TargetSharedComponent', SharedQuasarComponents.TargetComponent)
  

• 之后即可在主应用任意页面直接使用<target-shared-component></target-shared-component>标签。

关键注意事项 #

• 确保两个Quasar v1应用的Vue、Quasar核心依赖版本完全一致，避免运行时冲突
• 若组件依赖Quasar全局配置（主题、插件等），主应用需同步配置相同参数
• 打包UMD时可通过externals排除公共依赖，减小包体积：

  build: {
    externals: {
      vue: 'Vue',
      quasar: 'Quasar'
    }
  }
  

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