qiankun + Vue3
qiankun + Vue3
qiankun 官网
qiankun + Vue3 demo gitee 仓库
一、创建远程仓库
在 gitee 创建三个仓库，仓库名依次为 qiankun , qiankun-main , qiankun-admin ，分别作为最外层 qiankun 壳子，主应用，子应用。
在本地 clone 远程 qiankun 空仓库，在 qiankun 文件内 clone 主应用 qiankun-main 空仓库和子应用 qiankun-admin 空仓库。
创建在主应用和子应用中各自创建 vue3 项目，可以在 qiankun 文件夹使用 vue create qiankun-main 和 vue create qiankun-admin 创建主应用和子应用，然后会提示：
Vue CLI v4.5.15
? Target directory D:\Learn\qiankun\qiankun-main already
exists. Pick an action: (Use arrow keys)
Overwrite
> Merge
Cancel
选择 Merge ，就不会另外创建一个多余的文件夹，且可以和远程仓库联系起来。
二、下载 qiankun
在主应用和子应用中下载 qiankun ，使用 yarn ：
yarn add qiankun
三、配置主应用
3.1 注册子应用
在主应用 qiankun-main 的 main.js 文件中注册子应用：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入 qiankun 中的 registerMicroApps 和 start 方法
import { registerMicroApps, start } from 'qiankun'
createApp(App).use(store).use(router).mount('#main')
// 注册子应用，一个对象就是一个子应用的配置
registerMicroApps([
{
name: 'qiankun-admin', // 子应用 package.json 中 name
entry: '//localhost:8081', // 子应用的 ip 地址
// 子应用的容器，在主应用的 app.js 中，
// 若为主应用，app.js 会获取 3.2 打包配置修改
在主应用 qiankun-main 的 vue.config.js 文件中修改打包配置：
module.exports = {
devServer: {
headers: {
'Access-Control-Allow-Origin': '*', // 设置允许跨域请求，否则会因为在其他端口号获取资源报错
},
port: 8080, // 设置每次打开本地的端口号
open: true, // 每次 serve 完成自动打开
},
}
四、配置子应用
4.1 添加 qiankun 配置
在 src 目录新增 public-path.js：
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
4.2 子应用的启动等配置
在子应用 qiankun-admin 的 main.js 文件中注册子应用：
import { createApp } from 'vue'
import App from './App.vue'
// 将原来导出的 router 改为 routes 并引入
import routes from './router'
import store from './store'
// 引入配置文件
import './public-path.js'
// 引入 vue-router 的方法
import { createRouter, createWebHistory } from 'vue-router'
let router = null
let instance = null
function render({ container } = {}){
router = createRouter({
routes,
history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/admin' : '/'),
base: window.__POWERED_BY_QIANKUN__ ? '/admin' : '/'
})
instance = createApp(App)
instance.use(store).use(router).mount(container ? container.querySelector('#admin') : '#admin')
}
// 如果是单独启动的子文件，保证仍能正常运行
if (!window.__POWERED_BY_QIANKUN__) {
render()
}
// 生命周期的钩子函数
// 导出第一次进入当前子应用的钩子函数
export async function bootstrap() {
console.log('第一次进入admin')
}
// 导出每次创建挂载时的钩子函数
export async function mount(props) {
console.log("创建挂载组件")
render(props)
}
// 导出每次销毁时的钩子函数
export async function unmount(props) {
console.log("销毁组件")
instance.unmount()
instance._container.innerHTML = ''
instance = null
router = null
}
4.3 打包配置修改
在子应用 qiankun-main 的 vue.config.js 文件中修改打包配置：
// 获取 package.json 的 name，可以直接写死，但是需要保持一致
const { name } = require('./package.json')
module.exports = {
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
port: 8081,
},
// 打包配置文件
configureWebpack: {
output: {
library: `${name}-[name]`,
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
jsonpFunction: `webpackJsonp_${name}`,
},
},
}
五、主应用和子应用之间的跳转
主应用跳转到子应用可以直接使用 vue-router 中的方法进行跳转，也可以使用 window.history.pullState() 实现跳转。
子应用跳转到主应用使用 window.history.pullState() 跳转。
window.history.pullState()
六、关联微应用
将 qiankun 壳子和主应用 qiankun-main 和子应用 qiankun-admin 关联起来，在 qiankun 文件夹的终端：
git submodule add https://gitee.com/xuchuanjiang/qiankun-admin.git
和
git submodule add https://gitee.com/xuchuanjiang/qiankun-main.git
如果在 qiankun 文件夹下生成 .gitmodules 文件：
[submodule "qiankun-admin"]
path = qiankun-admin
url = https://gitee.com/xuchuanjiang/qiankun-admin.git
[submodule "qiankun-main"]
path = qiankun-main
url = https://gitee.com/xuchuanjiang/qiankun-main.git
则表示关联成功。
七、 git submodule
1.新增一个关联的应用
git submodule add + 子应用远程仓库地址
2.查看子目录的状态
git submodule
# 或者
git submodule status
3.clone 整个项目
git clone + qiankun 外壳远程仓库地址 --recurse -submodule
# 或者
git clone + qiankun 外壳远程仓库地址 --recursive
4.更新 qiankun 壳子下的应用
# 更新所有应用
git submodule update --remote
# 更新指定应用
git submodule update --remote + 指定应用名称