1. 本文解决了 umi4 利用 qiankun 架构 接入 lowcode-engine 低代码引擎的一系列问题,包含但不限于 lowcode-engine issues ( 3070 、1796 、1455、1014、423 ...);
2. 完善了 lowcode-engine 文档中自定义低代码组件不需要发布到 npm 的方案;
3. 实现了 umi4 接入 lowcode-engine qiankun 部署的方案;
4. 本文需要知识 node、qiankun、umi4、lowcode-engine、webpack4 && 5、nginx、docker、linux,如果不太熟悉也没关系只是过程中会有些疑问,但是不会影响最终实现;
5. 本文不会详细解释每一个报错的意思,因为需要的篇幅很长,本项目已经解决完在接入中会出现的报错和问题,大家只需要跟着这篇解决方案走,我会尽量简单化细说每一个步骤。大家可以对照方案中的代码和自己的代码排除出问题所在,或者直接基于此方案进行开发;

[TOC]

首先我们可以看到项目中有两个工程,其中 low-code-admin 是 umi4 项目,low-code-engine 是低代码项目,利用微前端架构 qiankun 进行接入。

// 项目需要跑在 8000 和 8001 端口
// 推荐包管理器 yarn,因为 low-code-engine demo 项目中有问题 pnpm 不支持
// 有 yarn.lock 锁文件,分别两个项目 yarn
// 需要 node >= 18.18.0
// ../low-code-admin
yarn && yarn dev
// ../low-code-engine
yarn && yarn dev
// 启动成功后打开 8000 端口的 low-code-admin 项目
// 第一次打开 低代码平台会有点慢需要等待 3s 左右

首页

低代码平台

低代码预览

此项目部署直接使用 qiankun 部署方案,教程使用 场景 1:主应用和微应用部署到同一个服务器(同一个 IP 和端口)

1. 首先分别将项目打包

   // ../low-code-admin
   yarn bild
   // 部署文件在 ../low-code-admin/dist 目录中
   // ../low-code-engine
   yarn bild
   // 部署文件在 ../low-code-engine/build 目录中
   

2. nginx 配置(注意 我的 nginx 路径和大家的肯定是不一致的,请根据自己的安装路径进行配置) a) html 文件夹 放入 umi 主应用

   按照 qiankun 部署方案 创建 child 文件夹 放入 低代码应用

   b) nginx conf 配置

   server {
    listen 80;
    listen [::]:80;
    server_name localhost;
    #access_log /var/log/nginx/host.access.log main;
    location / {
    root /usr/share/nginx/html/lowCode;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
    }
    # ...

3. 项目配置完成 重启 nginx

4. 效果展示

   首页

   低代码页面

至此 umi4 接入 lowcode-engine 开发已经部署已经介绍完成,如果不需要自定义组件,就可以点个小星星然后关闭页面了。需要自定义组件请继续往下看 : )

1. 自定义低代码组件开发调试

   1. 启动 low-code-material

      可以看到 项目中 有 low-code-material

      // 老样子进入目录使用 yarn 进行包下载以及启动项目
      yarn && lowcode:dev

      项目启动成功后会发下该项目是跑在 3333 端口的,我们并不需要打开 3333 端口。

   2. 打开 http://localhost:8000/low-code-engine/?debug 页面

      我们能看到 成功注入组件的弹框,以及在 组件库中组件的展示

      到这里 自定义组件已经接入进来

      后续对照文档和代码开发业务组件即可

2. 自定义低代码组件部署

   关于自定义物料官方文档在 开发一个自定义物料 这里,但是官方部署中只提供了 发布到 npm 的方案,没有提供部署至自己服务器的方案,接下来我会介绍如何部署到自己的服务器上使用。

   1. 我们在 low-code-material 目录下执行 lowcode:build 进行打包 打包完成之后会出现 build 文件夹,其中 meta.js 和 view.js 是需要放入服务器的文件(只需要这两个)

   2. meta.js 和 view.js 放入自己的服务器

      我在 child 目录下创建了 low-code-material 目录,并且把两文件上传到 low-code-material 目录下

   3. 确定文件能访问到并且设置 cors 解决跨域问题 确保文件能被访问

      配置 nginx 跨域

       location / {
       root /usr/share/nginx/html/lowCode;
       index index.html index.htm;
       try_files $uri $uri/ /index.html;
      + add_header Access-Control-Allow-Origin *;
      + add_header Access-Control-Allow-Headers *;
      + add_header Access-Control-Allow-Methods "GET, POST, PUT, OPTIONS";
       }

   4. 配置 low-code-engine 中的 assets.json 文件 在 low-code-engine 项目中 src/services 下 我们能看到 assets.js 文件

      assets copy.json 文件可以参考,主要是改 packages 部分和 components 部分

      192.168.200.130 这是我虚拟机服务器的地址,大家只需要吧这个地址改成自己服务器的地址,并且把 assets copy.json 改成 assets.json 重启项目即可

      此时部署已经完成