构建微前端micro-app配置的指南

2023-12-09 17:04:04

对于初学者而言，微前端是理解和学习的最佳入口。在文章中，我们着重探讨了如何配置微前端。首先，微前端配置与应用的基石——React和History路由密切相关。了解微前端的配置，需要读者具备这两个方面的知识。其次，我们发现，即使没有任何实际经验，普通用户也可以在学习文章之后轻松配置微前端。

配置过程涉及以下步骤：

安装必要的依赖包
```
npm install micro-app
```

配置基座应用

在基座应用中，创建一个名为 micro-app.config.js 的文件，并添加以下内容：

module.exports = {
  // 应用名称
  name: 'micro-app',
  // 应用入口
  entry: './src/main.js',
  // 应用挂载节点
  container: '#app',
  // 是否启用沙箱模式
  sandbox: false,
  // 是否启用微服务
  microservice: false,
  // 是否启用路由
  router: true,
  // 路由模式
  routerMode: 'history',
  // 子应用路由前缀
  routerPrefix: '/app',
  // 子应用配置
  children: [
    {
      // 子应用名称
      name: 'app1',
      // 子应用入口
      entry: '//localhost:8081/app1.js',
      // 子应用挂载节点
      container: '#app1',
      // 是否启用沙箱模式
      sandbox: false,
      // 是否启用微服务
      microservice: false,
      // 是否启用路由
      router: true,
      // 路由模式
      routerMode: 'hash',
      // 路由前缀
      routerPrefix: '/app1',
    },
    {
      // 子应用名称
      name: 'app2',
      // 子应用入口
      entry: '//localhost:8082/app2.js',
      // 子应用挂载节点
      container: '#app2',
      // 是否启用沙箱模式
      sandbox: false,
      // 是否启用微服务
      microservice: false,
      // 是否启用路由
      router: true,
      // 路由模式
      routerMode: 'hash',
      // 路由前缀
      routerPrefix: '/app2',
    },
  ],
};