# wl-template-mfe-master-vue

**Repository Path**: weilan-ui/wl-template-mfe-master-vue

## Basic Information

- **Project Name**: wl-template-mfe-master-vue
- **Description**: 基于qiankun的微前端主应用项目模板
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微前端基座模板

项目主要使用说明，详细说明见_doc目录，未熟悉项目时多查看doc目录。
多问、多记录、开发时不便之处、多提建议以便不断改进脚手架等生产力工具。
项目初期设计改动相对较多，多关注README及doc。

## 项目启动
```js
npm run cinit    // 使用cnpm下载依赖，推荐cinit节省下载时间
npm run init     // 或 使用npm下载依赖

npm run serve    // 运行全部项目

npm run build     // 打包全部项目
```
注意：如果下载报错，报 bin/sh 找不到start命令，那可能是mac or linux，进入目录一个一个下载运行。   
另：执行批量服务耗时较久，请耐心等待，init与build成功会在控制台提示，serve稍加等待或刷新浏览器即可。

### 项目开发步骤
1. 确认模块划分的微应用
2. 安装脚手架后，使用`wl init myapp` 创建项目
3. 开发时建议进入微应用目录中，分别运行master和当前要开发的项目，可以更好的查看错误信息

```js
npm i wl-cli -g

wl init myapp
```

3. 新建主应用时，选择mfe-master类型，会创建_doc目录、_server目录、master目录、config目录及package.json等文件，创建子应用时选择mfe-subapp类型，会创建一个微应用项目工程模板

4. 新建应用时会让输入端口号，主要用于微前端应用。当创建的是子应用时，你输入的端口号就是子应用的运行端口，需要手动写入_server/data目录下的应用注册表

5. 在主应用src/core/app-config注册表内新增子应用注册数据结构，其中devEntry为开发环境入口即子应用ip+端口号；routerBase为子应用路由前缀，children为子应用菜单

6. 微前端模式的子应用需要有一个根路由'/',即子应用`${routerBase}/`。这样不用处理子应用的跟路由重定向。详见注意事项：子应用路由配置说明

## 注意事项

### 微前端问题汇总
#### 子应用刷新页面404
子应用的接口代理要写在主应用master的vue.config下。路由被代理成接口需要做bypass处理
```js
 proxy: {
      "/user": {
        target: "http://192.168.1.92:3000/mock/27/",
        changeOrigin: true,
        pathRewrite: {},
        /**
         * @name 解决微前端环境下，子应用接口会被代理到主应用，proxy的接口匹配前缀如果和路由前缀一致，刷新将路由代理为接口致页面404问题
         * @param {*} req 
         */
        bypass: function (req) {
          if (req.headers.accept.indexOf('html') !== -1) {
            return '/index.html';
          }
        }
      },
 }
```

### 下载依赖和运行项目
1. 在根目录写的有批量运行命令，会把包括本地node server和其他所有微应用全部运行
2. 如果单独运行，则需要考虑到本地node serve的运行，否则本地模拟接口无效

### 公共资源处理
1. 每个微应用在src目录下自建library目录连接library仓库

2. 在根目录建立library目录，并在每个微应用package.json中以本地包的方式引入（适用于全部微应用在一个仓库）

3. library库使用npm link统一导出，各应用import导入。（适用于yarn）

4. 使用cdn和webpack忽略打包（适用于线上）

### 子应用代理配置
1. 在微前端环境运行时，在主应用vue.config.js配置proxy代理

### 子应用_http_类
1. 每个子应用实例化自己的http请求类，因为每个微应用的baseUrl可能不一致

### 子应用路由配置说明
1. 微前端模式，采用从服务端获取路由映射本地文件方式，因为每个vue项目需要一个跟路由'/'，而微应用是公用主应用的首页！   
因此在_server/data/appConfig配置子应用路由时，应有一个url为`${routerBase}/`（即与routerBase项目的路由），这样不用处理子应用的跟路由重定向。

例：
```js
{
    id: "3",
    title: "用户管理",
    routerBase: "/user",      // 路由前缀
    children: [
      {
        id: "3-1",
        title: "组织机构",
        url: "/user"          // 根路由
      },
      {
        id: "2-2",
        title: "岗位管理",
        url: "/user/role"
      }
    ]
  },
```

2. 单独运行模式，会使用子应用内router/routes下路由列表，因此单独运行应配置此处路由