Vue3环境下Spring Boot Admin集成vue-rx报错解决方案求助

问题根源 #

你当前使用的vue-rx@6.2.0仅支持Vue2，它内部依赖Vue2的全局Vue对象和Vue.use方法，但Vue3采用createApp创建应用，不存在全局Vue对象，因此调用app.use(VueRx)会触发Vue.use is not a function错误。

解决方案：替换为Vue3兼容的RxJS集成库 #

使用@vueuse/rxjs替代vue-rx，它是Vue官方生态中支持Vue3组合式API的RxJS集成工具，完全适配Vue3的架构。

步骤1：更新依赖 #

卸载旧的vue-rx，安装兼容版本的@vueuse/rxjs：

npm uninstall vue-rx
npm install @vueuse/rxjs@9.x rxjs@^6.6.7

注：@vueuse/rxjs@9.x兼容你当前使用的rxjs@6.6.7，无需升级RxJS。

步骤2：修改index.js配置 #

移除全局注册VueRx的代码，因为@vueuse/rxjs无需全局注册，直接在组件中使用组合式API即可：

import custom from "./custom.vue";
import { createApp } from 'vue';

SBA.use({
  install({viewRegistry}) {
    // 直接挂载组件，无需全局注册RxJS相关插件
    const app = createApp(custom); 
    app.mount('#custom')

    viewRegistry.addView({
      name:   'instances/custom',
      parent: 'instances',
      path:   'custom',
      component: custom, // 修正原代码中的customEndpoint笔误
      label: 'New menu',
      group: 'custom',
      order: -10,
      isEnabled: ({ instance }) => {
        return instance.hasEndpoint("custom");
      },
    });
  }
});

步骤3：在组件中使用@vueuse/rxjs #

在custom.vue中通过组合式API使用RxJS，示例如下：

<template>
  <div class="custom-view">
    <h3>RxJS 示例</h3>
    <p>计数：{{ count }}</p>
  </div>
</template>

<script setup>
import { useObservable } from '@vueuse/rxjs';
import { interval } from 'rxjs';
import { map } from 'rxjs/operators';

// 将RxJS Observable转换为Vue响应式变量
const count = useObservable(interval(1000).pipe(map(i => i + 1)));
</script>

关键说明 #

• @vueuse/rxjs提供了一系列组合式函数（如useObservable、useSubscription等），完美适配Vue3的响应式系统和组件生命周期。
• 若坚持使用原vue-rx，则只能回退到Vue2，但这显然不符合你的升级需求，因此替换为@vueuse/rxjs是最优解。

内容的提问来源于stack exchange，提问作者peter.kormos