微前端qiankun 实战

API们

import { initGlobalState, MicroAppStateActions，... } from 'qiankun';

//注册微应用的基础配置信息
registerMicroApps(apps, lifeCycles?)   

//启动 qiankun
start(opts?)

//设置主应用启动后默认进入的微应用
setDefaultMountApp(appLink)

//第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。
runAfterFirstMounted(() => startMonitor());

//手动加载一个微应用。
loadMicroApp(app, configuration?)

//手动预加载指定的微应用静态资源。仅手动加载微应用场景需要，基于路由自动激活场景直接配置 prefetch 属性即可。
prefetchApps(apps, importEntryOpts?)

//添加全局的未捕获异常处理器
addGlobalUncaughtErrorHandler(handler)

//移除全局的未捕获异常处理器
removeGlobalUncaughtErrorHandler(handler);

//定义全局状态，并返回通信方法，建议在主应用使用，微应用通过 props 获取通信方法。
initGlobalState(state)

一、主应用注意事项：

1:安装qiankun
2:配置main.js

//qiankun配置
import { registerMicroApps, start } from 'qiankun';

//子应用列表
let apps = [
  {
    name:'finance',
    entry:'//localhost:8088',//子应用的地址，这里演示是本地启动的地址。
    container:'#app',//子应用的容器节点的选择器（vue一般为app）----子应用将插入到该id下
    activeRule:'/finance',//访问子应用的规则，比如：主应用为localhost:8081，那访问该子应用的url    应为localhost:8081/finance
  }
]

//注册子应用
registerMicroApps(apps);

//启动
start();

二、微应用注意事项：

1：建议 history 模式   不用hash# 跳转有问题。

const router = new Router({
  mode: 'history',   // 模式，默认hash
  base: '/dist', // 基础路径----与name   与activeRule 一致
  routes: [...]
})

//本地环境 ：vue.config.js    线上部署需要 his
    devServer:{
        historyApiFallback:true
    }
    

注意：如果项目不在服务器的根目录下，即static和index.html不在服务器根目录下面，
就要设置base，例如我把打包好的dist文件直接放到了服务器的根目录下，此时就要配置base为“/dist”

2：
配置：

let ASSET_PATH = process.env.ASSET_PATH||'./'     //process.env.ASSET_PATH---在env中配置
module.exports = {
    publicPath：ASSET_PATH   //不去动output中的publicPath
}