Micro-App-Demo 项目常见问题解决方案

Micro-App-Demo 项目常见问题解决方案

micro-app-demo micro-app 案例 项目地址: https://gitcode.com/gh_mirrors/mi/micro-app-demo

项目基础介绍

Micro-App-Demo 是一个微前端框架的案例仓库，展示了如何将 React、Vue、Angular、Next.js、Nuxt.js 和 Vite 等前端框架作为主应用和子应用接入微前端。该项目旨在通过尽可能少的代码改动，实现微前端架构的完整功能。

主要的编程语言包括：

• JavaScript
• TypeScript

新手使用注意事项及解决方案

1. 依赖安装失败

问题描述：在执行 yarn bootstrap 命令时，可能会遇到依赖安装失败的情况。

解决方案：

1. 单独安装依赖：如果 yarn bootstrap 失败，建议单独进入每个子目录执行 yarn install。
2. 检查网络连接：确保网络连接正常，能够访问 npm 或 yarn 的包管理服务器。
3. 清理缓存：尝试清理 yarn 缓存，执行 yarn cache clean 后再重新安装依赖。

2. 项目启动失败

问题描述：在启动项目时，可能会遇到端口冲突或其他启动失败的问题。

解决方案：

1. 检查端口占用：各主应用都监听了 3000 端口，因此只能同时启动一个主应用。可以通过 lsof -i :3000 检查端口占用情况，并关闭占用端口的进程。
2. 修改端口配置：如果需要同时启动多个主应用，可以在 package.json 中修改端口配置，避免端口冲突。
3. 查看错误日志：启动失败时，查看控制台输出的错误日志，根据错误信息进行排查和解决。

3. 子应用路由问题

问题描述：子应用的路由配置可能与主应用的路由配置冲突，导致页面无法正确加载。

解决方案：

1. 检查路由配置：确保子应用的路由配置与主应用的路由配置不冲突。可以在子应用的路由配置中添加前缀，避免冲突。
2. 使用基座路由：在子应用的配置中，使用 baseroute 参数指定基座应用分配给子应用的基础路由。例如：

   <micro-app name='app-vue2-demo' url='http://localhost:4001/' baseroute='/app-vue2-demo'></micro-app>
   

3. 调试路由：在开发过程中，使用浏览器的开发者工具调试路由，确保路由配置正确。

通过以上解决方案，新手可以更好地理解和使用 Micro-App-Demo 项目，顺利进行微前端开发。

micro-app-demo micro-app 案例 项目地址: https://gitcode.com/gh_mirrors/mi/micro-app-demo