qiankun微前端使用

微前端是什么？

微前端就是页面的某个功能可以独立为一个项目进行开发、部署。比如：自己的项目使用iframs引入百度

qiankun

qiankun是一个基于single-spa的微前端实现库，qiankun 对于用户而言只是一个类似 jQuery 的库，你需要调用几个 qiankun 的 API 即可完成应用的微前端改造

主应用

安装qiankun

npm i qiankun -S

主应用配置

在webpack入口js文件中引入qiankun方法注入。

//qiankun配置import { registerMicroApps, start } from 'qiankun';//子应用列表let apps = [{name:'subapp',entry:'//localhost:8080',//子应用的地址，这里演示是本地启动的地址。container:'#app',//子应用的容器节点的选择器（vue一般为app）activeRule:'/subapp',//访问子应用的规则，比如：主应用为localhost:8081，那访问该子应用的url应为localhost:8081/subapp}]//注册子应用registerMicroApps(apps);//启动start();

子应用配置

src中创建public-path.js文件

//public-path.jsif (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}

main.js 中加入子应用生命周期函数，统一调用

import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falselet instance = null;function render(props = {}) {const { container } = props;instance = new Vue({render: (h) => h(App),}).$mount(container ? container.querySelector('#app') : '#app');}// 独立运行时if (!window.__POWERED_BY_QIANKUN__) {render();}export async function bootstrap() {console.log('[vue] vue app bootstraped');}export async function mount(props) {console.log('[vue] props from main framework', props);render(props);}export async function unmount() {instance.$destroy();instance.$el.innerHTML = '';instance = null;}

解决跨域问题

子应用和主应用为两个服务，分别在两个端口，要想通过主应用访问子应用的资源必定会存在跨域问题
vue.config.js

const { name } = require('./package');module.exports = {devServer: {headers: {'Access-Control-Allow-Origin': '*',},},configureWebpack: {output: {library: `${name}-[name]`,libraryTarget: 'umd', // 把微应用打包成 umd 库格式jsonpFunction: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal},},};