微应用-qiankun-3

前言

上一篇把vue2 和vue3 进行了微应用的嵌入，但是里面发现了不少的问题，这篇文章我们主要来解决这些问题。

项目中遇到的问题整理

输入路径无法跳转对应微应用

上一篇文章中的配置项完成后，把项目起了个 git 仓库，重新安装了依赖，然后就发现了问题，当时是从浏览器直接输入的对应地址，几个子应用正常跳转，但是同样的代码，再这样操作就无法跳转到对应页面了。后来查询原因是需要子应用进行对应路由的配置。那我们来设置一下。

react 主应用路由配置

安装依赖包 pnpm install react-router-dom index.js 中路由添加，不然路由跳转会报错

js 复制代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { registerMicroApps, start } from 'qiankun';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // 添加路由
  <BrowserRouter><App /></BrowserRouter>
);


registerMicroApps([
  {
    name: 'micro-react', // 子应用名称，尽量和子应用package.json name 一致
    entry: '//localhost:3001', //子应用端口
    container: '#micro-container', //子应用渲染节点
    activeRule: '/homepage', //路由监听，如果进入该路由，则渲染子应用
  },
  {
    name: 'micro-vue2x', // 子应用名称，尽量和子应用package.json name 一致
    entry: '//localhost:3002', //子应用端口
    container: '#micro-container', //子应用渲染节点
    activeRule: '/vue2home', //路由监听，如果进入该路由，则渲染子应用
  },
  {
    name: 'micro-vue3x', // 子应用名称，尽量和子应用package.json name 一致
    entry: '//localhost:3003', //子应用端口
    container: '#micro-container', //子应用渲染节点
    activeRule: '/vue3home', //路由监听，如果进入该路由，则渲染子应用
  }
])

start();

在 app.js 中添加路由跳转按钮，实现一个简单的界面效果，三个tab切换不同的子应用，在tab 路由跳转对应 activeRule 路径即可

react 子应用 同样在 index.js 中配置 BrowserRouter,在 app.js 中配置 /homepage 路由

vue2与vue3 我们在生成项目时已经选择了路由项，用对应的路由来设置即可。

tab 切换导致 react 子应用不渲染问题

问题描述：第一次进入react 子应用界面正常显示，切换vue子应用后再回来页面空白,没有任何报错。

这个问题卡了好久，查了不少资料，试着去卸载dom 也依然无法解决，查看dom 节点,发现只剩下了根节点，试着对dom 节点进行存在性判断，就可以解决了。但是，又发现了一个奇怪的问题，现在去掉节点存在的判断去复现原来的问题，发现又一切正常了......真的很妖......
修改方案： 加一个root存在的条件，如果不存在进行赋值dom 如果存在，则直接render。但现在又无法复现，改不改都没啥必要了，如果有这种情况，可以用这个方案试下。

部署

我们采用第一种方式，主子应用部署在同一个服务器下。改造一下项目结构，使整个项目更加清晰明了。在根目录配置主应用，创建child目录，将子应用移入。（如果子应用运行报错，删除依赖包重新安装即可）

react 子应用修改

在index.js 中路由添加 basename

表示如果是qiankun打开，我们运行/app-micro-react 路由，如果是子应用单独打开，则运行 /child/micro-react/ 路由

在webpack.config.js 中添加publicPath

vue2，vue3的修改是一样

主应用修改 index.js 修改子应用配置文件

注意entry与 activeRule 不要用同一个路径，否则刷新时会有问题。
entry 的路径问题，不然会导致无法挂载。（相对路径有问题，原因还在排查）

js 复制代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { registerMicroApps, start } from 'qiankun';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // 添加路由
  <BrowserRouter><App /></BrowserRouter>
);
registerMicroApps([
  {
    name: 'micro-react', // 子应用名称，尽量和子应用package.json name 一致
    entry: 'http://localhost:3001/child/micro-react', //子应用
    container: '#micro-container', //子应用渲染节点
    activeRule: '/app-micro-react', //路由监听，如果进入该路由，则渲染子应用
  },
  {
    name: 'micro-vue2x', // 子应用名称，尽量和子应用package.json name 一致
    entry: 'http://localhost:3002/child/micro-vue2x', //子应用
    container: '#micro-container', //子应用渲染节点
    activeRule: '/app-micro-vue2x', //路由监听，如果进入该路由，则渲染子应用
  },
  {
    name: 'micro-vue3x', // 子应用名称，尽量和子应用package.json name 一致
    entry: 'http://localhost:3003/child/micro-vue3x', //子应用
    container: '#micro-container', //子应用渲染节点
    activeRule: '/app-micro-vue3x', //路由监听，如果进入该路由，则渲染子应用
  }
])

start();

现在主子应用都已经正常运行，我们来进行打包输出配置主应用：按照 react 正常的打包流程生成build 文件即可 react子应用：package.json中添加homepage路径

在.env文件中添加 BUILD_PATH

vue 子应用（2,3一样）在vue.config.js 中添加配置 outputDir

最后

下一步就是通过nginx部署在服务器了，之前腾讯的到期了也没续费，后面再搞个服务器部署上去测试一下。