V4 微前端升级说明

V3 页面部署方式

和之前 v4 测试阶段一样，v3 单页面采用 iframe 嵌入新的框架

V4 应用改造

子应用项目需要拉取源分支的改造做了一些微应用的兼容

具体改造内容参考提交记录 13411

v4 微前端页面本地测试

启动 af-system-vue-web 基座项目， soybean-admin 分支，如果没有 soybean-admin 分支说明已经合并到 master 分支
配置微应用打开更目录下 env.config.ts 文件找到 createMicroApplication 函数添加自己的微应用，可以从 build/config/proxy.ts 设置自己的转发

/**
 * Create a micro application configuration
 *
 * @returns An array of micro application configuration objects
 * @name string The name of micro application
 * @iframe Whether to use iframe to load micro application
 * @remark The remark of micro application
 */
export function createMicroApplication() {
  return [
    {
      name: "revenue-web",
      iframe: false,
      remark: "营收",
    },
  ];
}

当作为子应用运行时务必设置 publicPath ，否则会出现资源加载错误基于 vue2client 的项目设置.env 文件中的 VUE_APP_PUBLIC_PATH 为子应用名称，如：

VUE_APP_PUBLIC_PATH=/
👇
VUE_APP_PUBLIC_PATH=/revenue-web

v4 微前端页面菜单配置

v3 资源管理

对于菜单节点的配置，必须要有 link 也就是功能连接，自定义赋值

对于页面节点如图配置，功能连接 $之前代表应用名称 $之后代表页面路由

Alt text

子应用路由的平铺改造

起因

在之前的设计中子应用路由是嵌套的，比如配置菜单节点为 v4link 并且拥有页面 meterInfoManage 那样我要在子应用里这样配置路由才能进行访问
```
router.map.js 文件

routerResource.v4link = view.blank
routerResource.meterInfoManage = () => import('@/pages/meterInfoManage')
```
子应用中必须配置 routerResource.v4link = view.blank 才能通过 /v4link/meterInfoManage 访问到 meterInfoManage 页面

TODO 👆 由于时间和精力的原因目前没有解决整个 2024-1-22

但是在平时使用中，客户的需求是 a 菜单页面的页面想要放到 b 菜单下面，c 菜单页面想要放到 d 菜单下面，这样的需求是很常见的

所以我们在采用微前端部署的情况下，对子应用做了路由平铺，也就是说配置菜单节点为 v4link 并且拥有页面 meterInfoManage

在微前端基座项目中访问 /meterInfoManage 就可以访问到 meterInfoManage 页面

    v4link
    ├─ meterInfoManage
👇
    ├─ v4link
    ├─ meterInfoManage

为子应用添加 nginx 配置

windows 环境下通常在入口 nginx 的 config/nginx.config 文件中的

k8s 环境下通常在入口 nginx 所读取的配置字典中

# windows 配置
    location /revenue-web {
      root D:\afservice-jingyang\AFProductV4\client\dist;
      add_header Access-Control-Allow-Origin *;
      if ( $request_uri ~* ^.+.(jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
        add_header Cache-Control max-age=7776000;
        add_header Access-Control-Allow-Origin *;
      }
      try_files $uri $uri/ D:\afservice-jingyang\AFProductV4\client\dist\revenue-web\index.html;
    }

  # k8s 配置 1
    location /revenue-web {
      root  /usr/local/dist/dist_revenue-web;
      add_header Access-Control-Allow-Origin *;
      if ( $request_uri ~* ^.+.(jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
        add_header Cache-Control max-age=7776000;
        add_header Access-Control-Allow-Origin *;
      }
      try_files $uri $uri/  /usr/local/dist/dist_revenue-web/revenue-web/index.html;
    }
# 或者 k8s 配置 2
    location /revenue-web {
      if ($request_filename ~* .*.(html|htm)$) {
        expires -1s;#缓存时间，-1代表不缓存
      }
      if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) {
        expires 30d;
      }
      if ($request_filename ~ .*.(js|css)$) {
        expires -1s;
      }
      alias  /usr/local/dist/dist_revenue-web/;
      index  index.html index.htm;
    }

为子应用的请求添加转发配置

		# windows 带有应用前缀的转发
		location ~ ^/(.*)/api {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        rewrite ^/(.*)/api(.*)$ /api$2 break;
        proxy_pass   http://127.0.0.1:8148/; # 转发到了当前nginx
		}
    # k8s 环境 带有应用前缀的转发
   location ~ ^/(.+)/api {
      proxy_set_header  Host $host;
      proxy_set_header  X-Real-IP $remote_addr;
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
      rewrite ^/(.+)/api/(.*)$ /$2 break;
      proxy_pass  http://gateway-svc.service:8080; # 转发到了网关
   }

V3 页面部署方式​

V4 应用改造​

v4 微前端页面本地测试​

v4 微前端页面菜单配置​

子应用路由的平铺改造​

为子应用添加 nginx 配置​

为子应用的请求 添加转发配置​