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 会获取 <router-view /> 的资源，
    // 若为子应用，app.js 会忽略 <router-view /> 中的资源，获取 id 为 container 的资源
    container: '#container',
    activeRule: '/admin'		// 激活当前子应用时路径前自动拼接的路径
  }
])


// 如果需要进行拦截，可以在此处导航守卫设置，如果不需要，可以省略
const childrenPath = ['/admin']

router.beforeEach((to, from, next) => {
  // 如果有 name 属性，表示是主应用
  if (to.name) {
    next()
  }
  // 如果是子应用
  if (childrenPath.some((item) => to.path.includes(item))) {
    next();
  }
  // 如果没有当路由
  else {}
})

// 启动 qiankin
start()

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 + 指定应用名称