144 lines
4.7 KiB
Markdown
144 lines
4.7 KiB
Markdown
# 问题分析
|
||
|
||
根据用户提供的信息和代码检查，已经确定了导致平台应用在 build/preview 模式下出现空白页面的根本原因：
|
||
|
||
## 1. 循环依赖死锁
|
||
|
||
平台应用的 `vue-vendor` chunk 中包含了顶层 `await`，用于等待 Module Federation 的 `loadShare` 完成：
|
||
```javascript
|
||
const Z=await X.then(e=>e()); // 等待 vue
|
||
const Pe=await Ee.then(e=>e()); // 等待 vue-router
|
||
```
|
||
|
||
这导致了以下循环依赖：
|
||
1. `vue-vendor` 加载时，执行顶层 `await`，等待 `loadShare` 完成
|
||
2. `loadShare` 需要初始化 Module Federation
|
||
3. Module Federation 初始化又依赖 `vue-vendor` 文件
|
||
4. 形成循环依赖死锁，整个应用初始化被阻塞
|
||
|
||
## 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 尝试共享这些核心依赖。
|
||
|
||
```typescript
|
||
// 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 尝试共享这些核心依赖。
|
||
|
||
```typescript
|
||
// 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 构建共享模块
|
||
|
||
```bash
|
||
# 切换到共享模块目录
|
||
cd f:/Project/urbanLifeline/urbanLifelineWeb/packages/shared
|
||
|
||
# 构建共享模块
|
||
pnpm build
|
||
```
|
||
|
||
### 3.2 构建平台模块
|
||
|
||
```bash
|
||
# 切换到平台模块目录
|
||
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` 配置中可能导致这些依赖在多个模块中重复加载，但这是解决循环依赖死锁的必要代价
|
||
- **构建错误**：需要确保修改后的配置能够正确构建
|
||
- **运行时错误**：需要验证移除共享依赖后，应用是否能够正常运行
|
||
|
||
# 后续优化建议
|
||
|
||
1. **使用更稳定的 Module Federation 配置**：考虑使用 `@module-federation/runtime` 或其他更稳定的 Module Federation 实现
|
||
2. **调整打包策略**：避免将核心依赖（如 `vue` 和 `vue-router`）与 Module Federation 相关代码打包到同一个 chunk 中
|
||
3. **添加错误处理**：在应用初始化过程中添加错误处理，当依赖加载失败时给出明确提示
|
||
4. **改进日志记录**：在应用初始化的关键节点添加更多日志，便于定位问题
|
||
|
||
# 执行步骤
|
||
|
||
1. **修改平台模块的 Vite 配置**：移除 `shared` 配置中的 `vue` 和 `vue-router`
|
||
2. **修改共享模块的 Vite 配置**：移除 `shared` 配置中的 `vue` 和 `vue-router`
|
||
3. **构建共享模块**：确保共享模块能够正确构建
|
||
4. **构建平台模块**：确保平台模块能够正确构建
|
||
5. **启动预览服务器**：启动平台模块的预览服务器
|
||
6. **验证应用是否正常运行**：访问应用并验证是否正常运行
|
||
7. **检查控制台输出**：确认控制台显示预期的日志
|
||
|
||
通过执行以上步骤，我们可以解决平台应用在 build/preview 模式下出现空白页面的问题，确保应用能够正常初始化和运行。 |