qiankun微前端使用

微前端是什么？

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

qiankun

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

主应用

安装qiankun

npm i qiankun -S

主应用配置

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

javascript 复制代码

//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文件

javascript 复制代码

//public-path.js

if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

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

javascript 复制代码

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

let 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

javascript 复制代码

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
    },
  },
};