umi + qiankun + vue 微前动态路由及数据共享学习笔记

2024-03-15 22:45:03

Demo技术组合选择

主应用 UmiJS ，子应用同时支持 Umi , Vue2.x , Vue3.x(不稳定)

demo示例

https://github.com/ldinger/umi-qiankun-vue-demo.git

说明：本例是参考 umi-plugin-qiankun 添加了vue 子应用。
applications 为所有应用目录，安装完环境后在各各应用目录分别执行 tyarn 或者 yarn 安装依赖
包后在根目录执行 tyarn start

master 主应用 --基于 umijs

app1 子应用 --基于umijs

vueapp2 子应用 --基于 vue

环境安装及命令

#安装tyarn
npm i yarn tyarn -g
# umi 安装 
tyarn global add umi
# 依赖包安装 （在项目文件所在目录 执行 等价 npm i ）
tyarn
 # 开发环境起动
tyarn start
# 打包
tyarn build

参考链接

https://github.com/umijs/umi-plugin-qiankun （ umijs -qiankun 插件demo ）

https://qiankun.umijs.org/zh/guide （ qiankun ）

https://umijs.org/zh-CN/docs （ umijs ）

为什么选UmiJS

基于 React 的以路由为基础。它有很多实用的插件比如权限、数据流、约定式路由 …
大厂在用、活跃度高

动态路由方案

开发环境，修改 mock/app.js

// 依据映射数据会自动注册对应的子应用服务 
export default {

    "GET /api/apps": [
        { "name": "app1", "entry": "//localhost:8001/", "base": "/app1" },
        { "name": "vueapp2", "entry": "//localhost:8002/", "base": "/vueapp2"},
        { "name": "app3", "entry": "//localhost:8003/", "base": "/app3" }
    ]
}

// 说明：  name 子应用唯一标识 ， entry 子应用入口地址  ， base 对应的子应用路由设置

数据共享方案

主应用参考代码

主应用根目录/ app.js

import request from './services/request';
const fetch = require("dva").fetch;
import { setData} from './rootExports';

export const qiankun = request('/apps').then(apps => {

    const F  = { "mountElementId": "root-subapp-container"};
     // 向子应用传递数据方式一 子应用为vue时建议   ( 添加 props )
    const props = {  k12 : 'google is  died  ' };

    apps = apps.map(app => Object.assign({ props }, app  , F ));

    // 向子应用传递数据方式二  - 子应用为umi时建议  (rootExports )
    setData( props )
    return {
        apps,
        fetch: url => {
            console.log('静态资源fetch覆盖');
            return fetch( url  );
        }

    }

});

子应用 vue 参考代码

根目录 main .js 中配置

// 注册为子应用后的生命周期函数  mount  ,
export async function mount(props) {
  console.log('[vue] 数据 from 主应用', props );

  // 将拿到的数据 提交到全局数据仓库
  store.commit('setK12' , props.k12 ) ;
	
  // 执行子应用自己的渲染函数 
  render(props);
}

子应用 Umi 参考

在任一对应的页面 / 组件中 import useRootExports 组件

import { useRootExports } from 'umi';
const DEFAULT = {  k12 : ' 做为非子应用时的数据 '} ;

export default function() {
  const rootExports = useRootExports();

  // 共享的数据 
  const gdata = rootExports && rootExports.getData() || DEFAULT;
 
  const style = { color: 'red'}
  console.log('rootExports', rootExports, gdata);
  return (
    <div>
      <h1 style={style}>{`global data from main app   & ${gdata.k12}`}</h1>
    </div>
  );
}

跨服务器部署方案

解决跨域问题， nginx 参考配置

# 主应用
server {
        listen 9527;
        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";

        location / {
            root /datas/umi-qiankun-vue-demo/applications/master/dist;   
            try_files $uri $uri/ /index.html =404;   
        }
        
  
  # 模拟后端返回子应用动态路由及相关数据 
	    location  ~ ^/api/apps {
           default_type application/json;
           add_header Content-Type 'application/json; charset=utf-8';
           return 200 '[{"name":"app1","entry":"//localhost:9601/","base":"/app1"},{"name":"vueapp2","entry":"//localhost:4002/","base":"/vueapp2"},{"name":"vueapp3", "entry":"//localhost:4003/","base":"/vueapp3"}]';
        }
}


#子应用  - umi  
server {
        listen 9601;
        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";

        #允许所有可以跨站访问 
        add_header Access-Control-Allow-Origin *;
        # 被允许的request-method
        add_header Access-Control-Allow-Method GET,POST,PUT,DELETE,OPTIONS;

        location / {
            root /datas/umi-qiankun-vue-demo/applications/app1/dist;   
            try_files $uri $uri/ /index.html =404;   
        }
}


# 子应用  -  vueapp2
server {
        listen 9602;
        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";
	    index index.html;
        #允许所有可以跨站访问 
        add_header Access-Control-Allow-Origin *;
        # 被允许的request-method
        add_header Access-Control-Allow-Method GET,POST,PUT,DELETE,OPTIONS;
        location / {
            root /datas/umi-qiankun-vue-demo/applications/vueapp2/dist;
            try_files $uri $uri/ /index.html =404;
        }
}

新建子应用方案

参考： https://qiankun.umijs.org/zh/guide/tutorial#vue-%E5%BE%AE%E5%BA%94%E7%94%A8

码农公寓