react16接入微前端到vue项目总结

1.vue主应用配置

// mian.js
const apps = [
    {
   
        name: 'react16',
        entry: '//localhost:3888', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch
        container: '#react16',
        activeRule: '/rfmtools/#/react16'
    }
];
registerMicroApps(apps); // 注册应用
start(); //

1.1 url路径要和activeRule匹配上

1.2 主应用开个路由承载微应用

1.3 注意官网介绍 接入的微应用页面有子路由 要加*

1.4 开一个承载子应用的页面

命令改造

"scripts": {
   
        "install-all": "npm-run-all --serial install:*",
        "install:vue3": "cd qiankun/vue3 && yarn install",
        "install:react16": "cd qiankun/react16 && yarn install",
        "start": "npm-run-all --parallel start:*",
        "start:hf": "vue-cli-service serve",
        "start:vue3": "cd qiankun/vue3 && yarn serve",
        "start:react16": "cd qiankun/react16 && yarn dev",
        "build": "npm-run-all --parallel build:*",
        "dev": "vue-cli-service serve",
        "build:hf": "vue-cli-service build",
        "build:vue3": "cd qiankun/vue3 && yarn build",
        "build:react16": "cd qiankun/react16 && yarn build",
   }

2.微应用 react项目接入

// index.tsx
/// <reference path="index.d.ts" />
import './public-path';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

function render