微前端框架qiankun体验_vlambda技术博客

vlambda
2021-08-18

微前端框架qiankun体验

同事跳槽了，新公司使用微前端模式，说看起来让人头大，让我看看。好嘛，我先看看，然后拿老项目来改吧改吧，项目框架为VUE。

介绍

qiankun 是一个基于 single-spa的微前端现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，我们将其微前端内核抽取出来并开源，希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统，同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。

目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用，在易用性及完备性上，绝对是值得信赖的。

以上介绍来自官网，具体描述可查看文档和 Github。

一、配置主应用

1、安装qiankun

yarn add qiankun

2、注册子应用

src目录下创建micros.js文件，添加如下代码

import { registerMicroApps,  addGlobalUncaughtErrorHandler,   start } from "qiankun";// 微应用注册信息
registerMicroApps([ { name: "dzht", // 子应用名称    entry: "http://xxx.com", // 子应用访问地址    container: "#qiankun-container", // 子应用挂载的dom activeRule: "/dzht", // 子应用匹配路由标识 }], { beforeLoad: (app) => { console.log("before load", app.name); return Promise.resolve(); }, afterMount: (app) => { console.log("after mount", app.name); return Promise.resolve(); },});
addGlobalUncaughtErrorHandler((event) => { console.error(event); const { message: msg } = event if (msg && msg.includes("died in status LOADING_SOURCE_CODE")) { console.error("微应用加载失败，请检查应用是否可运行"); }});export default start;

3、修改App.vue

<template>  <div id="main-app"> <router-view /> <!-- 子应用将会挂载到qiankun-container上 --> <div id="qiankun-container"></div> </div></template>

4、修改main.js

import start from '@/micros' // 引入micros文件
start() // 启动主应用
new Vue({ router, store, render: h => h(App)}).$mount('#main-app')

二、配置子应用

1、子应用无需安装qiankun

2、src目录下创建 public-path.js

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

3、修改main.js

import './public-path'
// 新增：用于保存vue实例let instance = null; // 新增：动态设置 webpack publicPath，防止资源加载出错if (window.__POWERED_BY_QIANKUN__) {  // eslint-disable-next-line no-undef  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}/** * 新增：* 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");  instance.$destroy();  instance = null;}// 新增：独立运行时，直接挂载应用if (!window.__POWERED_BY_QIANKUN__) {  render();}// 修改function render() {  // 挂载应用  instance = new Vue({ router, store, render: h => h(App) }).$mount('#app');}

4、修改router.js

export default new Router({ mode: 'history',  base: window.__POWERED_BY_QIANKUN__ ? '/dzht' : '/', // 添加路由标识，需跟基座应用配置保持一致 routes: [ { path: '/', name: 'Index', meta: { title: '首页' }, component: () => import('./views/Index') }, ]})

5、修改vue.config.js

 // 获取子应用 name，需跟基座应用注册的应用名一致 const packageName = require('./package.json').name // 允许跨域，devServer下增加 devServer: {   ... headers: { "Access-Control-Allow-Origin": "*", }, }，// 子应用打包相关配置，configureWebpack下 output 增加 configureWebpack: { output: {  ... // 微应用的包名，这里与主应用中注册的微应用名称一致 library: `${packageName}`, // 将你的 library 暴露为所有的模块定义下都可运行的方式 libraryTarget: "umd", // 按需加载相关，设置为 webpackJsonp_MicroAppOrde 即可 jsonpFunction: `webpackJsonp_${packageName}`, }, },

6、项目部署后增加nginx配置

// location 下增加配置location / { ...  Access-Control-Allow-Origin: "*"  Access-Control-Allow-Headers: "Content-Type"}

完工，亲测有效，copy即用。

前端坞

前端打工人，打前端工人。

4篇原创内容

Official Account

vlambda博客
学习文章列表