fengxianqi/qiankun-example

🚀 qiankun实战demo，父应用vue，子应用用react和vue

qiankun-example

qiankun 实战 demo，父应用 vue，子应用使用 react, vue 和 原生HTML。

微前端qiankun从搭建到部署的实践

开始

安装根目录工程依赖

npm i

一键安装所有主子应用的依赖

npm run install

一键启动所有所有应用

npm start

通过 http://localhost:8080/ 访问主应用。

发布

一键构建并打包所有主子应用

npm run build

qiankun-example's Issues

请问一下，为什么main页面使用不了common包，引入直接报eslint错误，其他子页面不会出现错误

请问一下，子应用的路由实在哪里注册的，因为你在子应用那里有一个判断。用qiankun启动，子引用的路由没有注册

发布之后nginx怎么部署

你好，build之后我在ngixn配置了部署，可以打开主应用和子应用，
但是打开子应用之后点击浏览器的刷新按钮子应用就找不到了，页面一片空白

可以参考下阿里的icestark，不过他是React为主其余为子的

https://github.com/ice-lab/icestark

分仓库管理子应用

若项目有CI/CD，只修改了某个子应用的代码，但代码提交会同时触发所有子应用构建，牵一发动全身，是不合理的。

请问，独立仓库之后，基座怎么取子应用呢（子应用打包完成后， 怎么放到基座中？）。

可以通过webpack启动么

webpack-dev-server --progress --colors --hot --inline --content-base ./dis

build的bash指令，是专门给CI/CD用的吗？本地打包好像用不了bash命令

基座跑起来会有跨域问题，想问下

想问下怎么解决

.git 在顶层 sub-vue eslint lint:staged 这种要怎么配置

比如 sub-vue 中配置了 lint-staged 需要依赖git
但是.git 在上层目录

进入 sub-vue 目录 运行lint-staged 会报当前current directory is not a git directory!
这种怎么处理

npm run start问题

运行npm run start会自动打开浏览器打开子应用react项目页面，http://localhost:7788/subapp/sub-react。希望自动打开的为http://localhost:8080/ 主应用

Uncaught TypeError: application 'sub-vue' died in status LOADING_SOURCE_CODE: Failed to fetch

请教一下 代码报错 Uncaught TypeError: application 'sub-vue' died in status LOADING_SOURCE_CODE: Failed to fetch

main 主应用启动报错

application 'sub-vue' died in status LOADING_SOURCE_CODE: Failed to fetch

loadMicroApp 不生效问题

我想要使用 loadMicroApp 来手动启动 react 子应用，我的做法如下:

1. 删除 microApps 中注册的 React 微应用信息

const microApps = [
  {
    name: 'sub-vue',
    entry: process.env.VUE_APP_SUB_VUE,
    activeRule: '/sub-vue'
  },
  // {
  //   name: 'sub-react',
  //   entry: process.env.VUE_APP_SUB_REACT,
  //   activeRule: '/sub-react'
  // },
  {
    name: 'sub-html',
    entry: process.env.VUE_APP_SUB_HTML,
    activeRule: '/sub-html'
  }
]

2. 在 main 目录下创建组件 ReactSub.vue 内容如下:

<template>
  <div ref="reactContainer"></div>
</template>

<script>
import { loadMicroApp } from 'qiankun'
export default {
  mounted () {
    loadMicroApp({
      name: 'sub-react',
      entry: process.env.VUE_APP_SUB_REACT,
      container: this.$refs.reactContainer
    })
  }

}
</script>

3. 在基座 main/App.vue 中，注册 ReactSub 组件，并通过 v-if 进行合适时机加载

 <ReactSub v-if="showReact"></ReactSub>
  <button @click="changeShowReact">挂载 React</button>

    changeShowReact () {
      this.showReact = !this.showReact
    },

遇到的问题如下

1. 当我点击 「挂载 React」 按钮时，子应用并没有挂载，而只是去下载了该子应用的模版

2. 如果我一开始把 showReact 变量初始化为 true ，这种情况下则能够成功挂载该子应用。

vue3版本报错

请教一下，分仓库管理子应用，子应用也是分开管理么？每个都是一个repo，还是子应用仍在同一个repo下

1. 比如我有10几个子应用，每个子应用都是一个单独的git仓库，因为我们遵循gitflow的流程，如果在某一期的修改中，只修改了其中3个应用，那在上线测试的时候，如何做到10几个子应用同时打出release分支呢？
2. 如果分仓库管理了每个子应用，那git submodule和git subtree都是很好的子仓库管理方案，但缺点是每次子应用变更后，聚合库还得同步一次变更。这个是不是就不在场景使用了，看了下gitsubmoudle使用都是在一个仓库里使用

问题请教：子应用和父应用遮罩覆盖问题

子应用使用elemenui框架那种dialog或者抽屉组件，遮罩层挂载到了父应用的body，子应用的实际内容被遮罩层遮住，这种要怎么处理，如果只挂载的子组件本身，那父应用，一些公共的地方又没遮住

关于运行环境

麻烦作者在readme中写下node环境，我本地node-v :v18.15.0。启动时会抛出异常

sub-vue\src\main.js common库是自定义的吗？

//sub-vue\src\main.js
import { store as commonStore } from 'common'

在node_modules：/qiankun-example/sub-vue/node_modules/common/src/index"路径中可以找到

请问下common库是自定义的吗?
如果是，有如下问题想请教下：

1. 如何实现自定义库？
2. 为什么要放在node_modules目录下，而不是利用新建公共文件的方式引用？

项目全部安装 依赖，切换菜单报错

细节描述， 初始化 的菜单是可以进去的 ，但是其他菜单切换 就是进不去，但是切换到 初始化菜单本身没有问题

开发环境下，子应用单独运行正常访问后端api，在基座运行子应用，也配置proxy代理，接口报404

有人知道什么原因吗，开发环境下基座的跨域代理应该怎么

vue3 版本有吗

[common store] 封装的 GlobalState这一块，怎么在react或者html项目里应用？

项目里把GlobalState封装到了common项目里，sub-vue进行了引用。但是在react和jquery的html项目里可以引用吗？具体怎么用，特别是jquery的html项目中

子应用sub-react内容改变 基座刷新会报错

步骤：

1. 启动基座
2. 启动sub-react
3. 修改 react 子应用 App.js
4. 刷新 http://localhost:8081/sub-react 页面报错 子应用加载不出来

错误信息：
Uncaught Error: application 'sub-react' died in status LOADING_SOURCE_CODE: [qiankun] You need to export lifecycle functions in sub-react entry

其他：
重新start react子应用 页面可以正常展示
这边是热更新的问题吗

无法使用

按照部署过程操作后，无法启动
错误信息
available via npm run-script:
install:main
cd main && npm i
install:sub-vue
cd sub-vue && npm i
start:sub-vue
cd sub-vue && npm start
start:main
cd main && npm start
start:sub-html
cd sub-html && npm start
build
npm-run-all build:* && bash ./scripts/bundle.sh
build:sub-vue
cd sub-vue && npm run build
build:sub-html
cd sub-html && npm run build
build:main
cd main && npm run build

clone下来后npm install 报错，但是npm-run-all 确实已经安装了