UmiJS MPA模式配置问题解析与解决方案

问题背景

在使用UmiJS框架开发多页面应用(MPA)时，开发者可能会遇到"Can't resolve './src'"的错误提示。这个问题通常出现在配置MPA入口文件时路径设置不当的情况下。

错误现象

当开发者尝试按照常规思路配置MPA入口时，例如：

mpa: {
  entry: {
    docs: 'src/pages/docs.tsx',
    index: 'src/pages/index.tsx'
  }
}

运行构建命令(npm run build)后，系统会报出无法解析'./src'路径的错误。

问题根源

这个问题的根本原因在于对UmiJS MPA模式的理解偏差。UmiJS的MPA模式有其特定的约定和限制：

1. 文件结构约定：MPA模式下，UmiJS强制要求所有路由文件必须遵循src/pages/${path}/index.tsx的结构
2. 配置方式误解：entry配置项中的值不能直接使用字符串路径，而应该是一个配置对象

正确配置方式

正确的MPA配置应该遵循以下原则：

1. 文件结构：

   • /docs.html对应src/pages/docs/index.tsx
   • /index.html对应src/pages/index/index.tsx

2. 配置示例：

mpa: {
  entry: {
    docs: {
      // 页面特定配置
    },
    index: {
      // 页面特定配置
    }
  }
}

解决方案

对于遇到此问题的开发者，可以采取以下步骤解决：

1. 调整文件结构：确保页面文件按照src/pages/路径名/index.tsx的格式存放
2. 简化配置：如果不需要特殊配置，可以完全不配置entry，UmiJS会自动按照约定查找文件
3. 版本选择：某些情况下，使用UmiJS的max版本比simple版本更稳定

最佳实践建议

1. 遵循约定优于配置：尽量使用UmiJS的默认约定，减少自定义配置
2. 保持目录结构清晰：每个页面使用独立的目录和index文件
3. 版本选择：对于生产环境，推荐使用UmiJS的max版本以获得更完整的功能支持

总结

UmiJS的MPA模式虽然使用频率不高，但在特定场景下非常有用。理解其设计理念和约定规范是避免配置问题的关键。开发者应该特别注意文件结构的约定和配置项的正确用法，这样才能充分发挥UmiJS在MPA模式下的优势。