Vue3+Vite+TypeScript模块联邦无法正常使用问题求助

核心问题 #

TypeScript编译器无法识别远程联邦模块的类型，导致导入时报错。以下是针对性的解决步骤：

1. 添加远程模块的类型声明文件 #

在host-app的src目录下创建类型声明文件夹（比如typings），新建remote-app.d.ts文件，手动声明远程导出组件的类型：

// src/typings/remote-app.d.ts
declare module 'remote_app/myBtn' {
  import type { DefineComponent } from 'vue';
  
  // 若组件有明确的Props和Emit，可细化类型
  interface MyBtnProps {
    btnText?: string;
    isDisabled?: boolean;
  }

  const MyBtn: DefineComponent<MyBtnProps, {}, any>;
  export default MyBtn;
}

修改tsconfig.json，确保声明文件被TS识别：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/typings/**/*.d.ts" // 新增该行
  ]
}

2. 修正Vite联邦配置细节 #

• remote-app配置调整：将exposes中的路径改为正斜杠（避免Windows路径解析问题）：

  exposes:{
    './myBtn': './src/components/myButton/myButton.vue', // 替换反斜杠为正斜杠
  },
  

  同步shared的Vue配置与host保持一致：

  shared:{
    vue: {
      requiredVersion: '^3.3.2', // 明确指定版本，避免版本不一致
      singleton: true // 确保全局仅一个Vue实例
    }
  }
  

• host-app配置调整：确保remote路径可访问，先访问http://localhost:5001/assets/remoteEntry.js确认文件能正常加载，再保持基础配置：

  remotes:{
    'remote_app':'http://localhost:5001/assets/remoteEntry.js',
  },
  

3. 使用动态导入规避TS静态检查 #

在host-app中使用远程组件时，用Vue的defineAsyncComponent动态导入，避免TS编译时的静态检查报错：

<template>
  <div>
    <MyBtn v-if="MyBtn" btnText="远程按钮" />
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

// 动态导入远程组件
const MyBtn = defineAsyncComponent(() => import('remote_app/myBtn'));
</script>

4. 确认构建与预览流程正确性 #

• remote-app必须先执行npm run build生成构建产物，再启动vite preview --port 5001 --strictPort，确保remoteEntry是最新的编译结果。
• host-app直接用npm run dev启动开发服务即可，无需提前构建，Vite会在开发模式下动态加载远程模块。

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