微前端集成方案

# 微前端集成方案

# 微前端概念

AFCenter基座: AFCenter 前端主框架程序，是AFCenter的入口，负责加载微前端模块。

AFCenter微前端模块: 对应一个微前端项目，通过primeton create-m-app指令创建。

页面(组件)：一个微前端项目中，可以有多个页面(组件)，一个页面(组件)对应一个Vue的组件。

# 前置要求：AFCenter环境准备

环境搭建参考部署文档。本例中部署结构如图所示：

服务端口为:8001,前端端口为8000.

环境验证：浏览器访问:http://localhost:8000 输入admin/111111 登录成功。

# 创建微前端项目

1.安装primeton命令

npm install primeton-cli -g

2.创建微前端项目

primeton create-m-app 指令参考:

primeton create-m-app [moduleName] [debugPort]

创建微前端项目myApp,调试端口:8999

primeton create-m-app myApp 8999

运行命令后，在当前工作目录生成微前端项目结构：

# mfp.config.json 模块配置文件

exposes节点中配置外部可访问的模块。

项目默认创建了一个index模块，对应组件:

# 注：模块名称以必须以定义时必须以./开头，在使用时,不需要加./。模块名可以使用/。

# 开发和调试

1.安装依赖

npm install

2.启动调试服务

npm run dev

3.调试模块

调试页面需要以基座为入口，基座可以选择AFCenter前端发布介质，也可以通过AFCenter 源代码项目。本例中使用AFCenter前端发布介质。

打开浏览器，访问:http://localhost:8000 admin/111111,登录进入主页。

调试index模块，访问：

http://localhost:8000/#/module/myApp/page/index

参数说明：

http://{AFCenter基座地址}/#/module/{微前端模块名称}/page/{页面名称}

# 打包部署

1.运行打包命令

 npm run build:prod

编译产物在和微应用项目平级的disk目录下:

2.部署

微前端模块介质可以选择和AFCenter基座部署在一起，也可以选择独立部署。

本例为独立部署，nginx配置如下：

    server {
        listen       8888;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /Volumes/your/d/dist;
            index  index.html index.htm;
        }
    }