记录qiankun 结合vue3搭建项目

记录qiankun 结合vue3搭建项目

环境

脚手架选择4.5.12 cli版本过高会导致重写webpack时报错。
主应用和微应用均采用的vue3+ts。（ts会检测类型错误，在文件顶部加如下代码）

/* eslint-disable */ 
// @ts-nocheck

主应用下载qiankun 微应用无需下载依赖（npm install qiankun -s），主应用与微应用的路由模式应统一，均为hsitory或者hash。

资料

乾坤官网 https://qiankun.umijs.org/zh/guide
常见报错解答 https://qiankun.umijs.org/zh/faq

主应用

1. main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { registerMicroApps, start, setDefaultMountApp } from 'qiankun'
let app = null
function initVue() {
  app = createApp(App)
  app.use(router)
  app.mount('#app')
}
initVue()
// 设置默认进入的子应用无法生效 router实现
// setDefaultMountApp('/app1') 
router.push({
  path:'/app1'
})
// 在主应用中注册微应用
registerMicroApps([
  {
    name: 'demovue3one', // 微应用的名称
    entry: '//localhost:8008', // 微应用的 entry 地址
    container: '#appone', // 微应用的容器节点
    activeRule: '/app1', // 微应用的激活规则
    props:{
      age:18
    }
  }
])
start()

2.app.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-link to="/app1">gotoappone</router-link>
  </div>
  <div id="appone"></div>
  <router-view/>
</template>
/

3.至此主应用代码结束
其中

{
    name: 'demovue3one', // 微应用的名称 
    entry: '//localhost:8008', // 微应用的 entry 地址
    container: '#appone', // 微应用的容器节点
    activeRule: '/app1', // 微应用的激活规则
    props:{
      age:18
    }
  }

name对应微应用package.json的name；
entry对应微应用vue.config.js里的port端口设置
container对应主应用app.vue挂载的容器id
activeRule对应微应用的路由配置
props用于传参

微应用

1.main.js同级加入public-path.ts 作用用于能成功加载图片等资源

/* eslint-disable */ 
// @ts-nocheck
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

2.main.js代码如下

/* eslint-disable */ 
// @ts-nocheck
import './public-path'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
function render(props = {}) {
const { container } = props;
createApp(App).use(store).use(router).mount(container ? container.querySelector('#app') : '#app')
}
// 独立运行时，直接挂载应用
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
/**
* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
*/
export async function bootstrap() {
console.log("VueMicroApp bootstraped");
}

/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount(props) {
console.log("VueMicroApp mount", props);
render(props);
}

/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
export async function unmount() {
console.log("VueMicroApp unmount");

}

踩坑
2-1.

import './public-path'

必须写在第一行，否则可能无法引入图片等资源
2-2.

mount(container ? container.querySelector('#app') : '#app')

不能直接写

  mount('app') 

否则会报错找不到节点

3.在vue.config.js里重写配置

const { name } = require('./package')

module.exports = {
 publicPath: './',
 outputDir: 'dist',
 devServer: {
   port: 8008,
   overlay: {
     warnings: true,
     errors: true
   },
   headers: {
   //防止跨域
     'Access-Control-Allow-Origin': '*',
   }
 },
 configureWebpack: {
   output: {
     // 把子应用打包成 umd 库格式
     library: `${name}-[name]`,
     libraryTarget: 'umd',
     jsonpFunction: `webpackJsonp_${name}`,
   }
 }
}

有些版本vue.config.js

const { defineConfig } = require('@vue/cli-service')
const packageName = require('./package.json').name;

module.exports = defineConfig({
 transpileDependencies: true,
 devServer: {
   port: 7800,
   //开启跨域
   headers: {
     'Access-Control-Allow-Origin': '*',
   }
 },
 configureWebpack: {
   output: {
     library: `${packageName}-[name]`,
     libraryTarget: 'umd', // 把微应用打包成 umd 库格式
     // jsonpFunction: `webpackJsonp_${packageName}`,
   },
 },
})

4.子应用路由配置

const router = createRouter({
  history: createWebHistory(window.__POWERED_BY_QIANKUN__?'/app1':''),
  routes
})

完结撒花

ps： 如果采用hash模式 需要改变如下
setDefaultMountApp也不会生效

子应用配置如下

const router = createRouter({
  history: createWebHashHistory(window.__POWERED_BY_QIANKUN__?'#/app1':''),
  routes
})

主应用配置如下
router.js也修改

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

registerMicroApps([
  {
    name: 'demovue3one', // 微应用的名称
    entry: '//localhost:8008', // 微应用的 entry 地址
    container: '#appone', // 微应用的容器节点
    activeRule: '/#/app1', // 微应用的激活规则
    props:{
      age:18
    }
  }
])