wangys/urbanLifeline

Fork 0

Files

wangys 72cea2935d web打包问题

2026-01-07 15:30:29 +08:00

4.7 KiB

Raw Permalink Blame History

问题分析

根据用户提供的信息和代码检查，已经确定了导致平台应用在 build/preview 模式下出现空白页面的根本原因：

1. 循环依赖死锁

平台应用的 vue-vendor chunk 中包含了顶层 await，用于等待 Module Federation 的 loadShare 完成：

const Z=await X.then(e=>e());  // 等待 vue 
const Pe=await Ee.then(e=>e()); // 等待 vue-router

这导致了以下循环依赖：

vue-vendor 加载时，执行顶层 await，等待 loadShare 完成
loadShare 需要初始化 Module Federation
Module Federation 初始化又依赖 vue-vendor 文件
形成循环依赖死锁，整个应用初始化被阻塞

2. 配置问题

从配置文件可以看到：

平台模块的 vite.config.ts 中，shared 配置包含了 vue 和 vue-router
共享模块的 vite.config.ts 中，shared 配置也包含了 vue 和 vue-router
平台模块的 manualChunks 将 vue 和 vue-router 打包到了 vue-vendor chunk 中

解决方案

1. 修改平台模块的 Vite 配置

1.1 移除 shared 配置中的 vue 和 vue-router

从平台模块的 shared 配置中移除 vue 和 vue-router，避免 Module Federation 尝试共享这些核心依赖。

// packages/platform/vite.config.ts
federation({
  name: 'platform',
  remotes: {
    shared: {
      type: 'module',
      name: 'shared',
      entry: sharedEntry
    }
  },
  shared: {
    // 移除 vue 和 vue-router，避免循环依赖
    // vue: {},
    // 'vue-router': {},
    'element-plus': {},
    axios: {}
  }
})

1.2 调整 manualChunks 配置

保持 manualChunks 配置不变，继续将 vue 和 vue-router 打包到 vue-vendor chunk 中，但不再尝试通过 Module Federation 共享它们。

2. 修改共享模块的 Vite 配置

2.1 移除 shared 配置中的 vue 和 vue-router

从共享模块的 shared 配置中移除 vue 和 vue-router，避免 Module Federation 尝试共享这些核心依赖。

// packages/shared/vite.config.ts
federation({
  name: 'shared',
  filename: 'remoteEntry.js',
  exposes: {
    // ... 暴露的模块
  },
  shared: {
    // 移除 vue 和 vue-router，避免循环依赖
    // vue: {},
    // 'vue-router': {},
    'element-plus': {},
    'lucide-vue-next': {},
    axios: {}
  }
})

3. 重新构建和测试

3.1 构建共享模块

# 切换到共享模块目录
cd f:/Project/urbanLifeline/urbanLifelineWeb/packages/shared

# 构建共享模块
pnpm build

3.2 构建平台模块

# 切换到平台模块目录
cd f:/Project/urbanLifeline/urbanLifelineWeb/packages/platform

# 构建平台模块
pnpm build

# 启动预览服务器
pnpm preview

3.3 验证应用是否正常运行

访问 https://org.xyzh.yslg/platform/
检查控制台是否显示 ✅ Platform 应用启动成功 日志
确认页面不再是空白，显示正常内容

预期结果

应用能够正常初始化，控制台显示 ✅ Platform 应用启动成功 日志
访问 https://org.xyzh.yslg/platform/ 时显示正常内容，而不是空白页面
所有依赖模块都能正确加载，没有循环依赖死锁

风险评估

依赖重复加载：移除 vue 和 vue-router 从 shared 配置中可能导致这些依赖在多个模块中重复加载，但这是解决循环依赖死锁的必要代价
构建错误：需要确保修改后的配置能够正确构建
运行时错误：需要验证移除共享依赖后，应用是否能够正常运行

后续优化建议

使用更稳定的 Module Federation 配置：考虑使用 @module-federation/runtime 或其他更稳定的 Module Federation 实现
调整打包策略：避免将核心依赖（如 vue 和 vue-router）与 Module Federation 相关代码打包到同一个 chunk 中
添加错误处理：在应用初始化过程中添加错误处理，当依赖加载失败时给出明确提示
改进日志记录：在应用初始化的关键节点添加更多日志，便于定位问题

执行步骤

修改平台模块的 Vite 配置：移除 shared 配置中的 vue 和 vue-router
修改共享模块的 Vite 配置：移除 shared 配置中的 vue 和 vue-router
构建共享模块：确保共享模块能够正确构建
构建平台模块：确保平台模块能够正确构建
启动预览服务器：启动平台模块的预览服务器
验证应用是否正常运行：访问应用并验证是否正常运行
检查控制台输出：确认控制台显示预期的日志

通过执行以上步骤，我们可以解决平台应用在 build/preview 模式下出现空白页面的问题，确保应用能够正常初始化和运行。

4.7 KiB Raw Permalink Blame History Unescape Escape