微前端 qiankun 项目实践 !!! 防踩坑指南

共 10508字,需浏览 22分钟

 ·

2021-04-06 20:17

作者:zxh1307

原文地址:https://juejin.im/post/5ea55417e51d4546e347fda9

点击上方“前端简报”,选择“设为星标

第一时间关注技术干货!

导语

最近在做微前端的项目 , 过程中真是踩了不少坑 , 在有限的资料中不断试错 , 默默无语两行泪 哈哈.  在此次将采坑部分都记录下来, 让更多的人少走点弯路 ,   此项目使用 蚂蚁金服qiankun 为基础作为开发 . 话不多说 开讲 !!!

那什么是 qiankun 呢

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

什么是微前端

微前端架构具备以下几个核心价值:

  • 技术栈无关

    主框架不限制接入应用的技术栈,微应用具备完全自主权

  • 独立开发、独立部署

    微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新

  • 增量升级

    在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略

  • 独立运行时

    每个微应用之间状态隔离,运行时状态不共享

摘自 qiankun官方文档

主应用配置

此次项目 主应用与 子应用均为 vue ,

下载 qiankun

npm install qiankun

在主应用中注册微应用

// 导入乾坤函数
import {
  registerMicroApps,
  setDefaultMountApp,
  start
from "qiankun";


封装 render 方法

此方法在main.js 中要初始调用一次, 主要用来挂载主应用 , 之后子应用分别依次调用 ,所以故作判断. 传入的参数分别为 子应用 的 HTML 和 加载状态 content 字段 我们用 vuex 存储 起来,方便使用


let app = null;

function render({ appContent, loading }{
  if (!app) {
    app = new Vue({
      router,
      store,
      renderh => h(App),
    }).$mount('#app');
    
  } else {
    store.commit('microApp/changeCenter', appContent);
    store.commit('microApp/changeLoading', loading);
  }

}

微应用注册

下文中的apps 可以为获取后数据 , 注册微应用 本文案例比较简单,方便大家理解 ,

在注册自应用的参数 ** container 与 render** 采坑比较多,下边会着重讲解.


function genActiveRule(routerPrefix{
  return location => location.pathname.startsWith(routerPrefix);
}

//传递给子应用的数据
let msg = {
![](https://user-gold-cdn.xitu.io/2020/4/27/171bbc5de042ec98?w=1811&h=959&f=gif&s=4951066)
  data:'修炼爱情的辛酸,学会放好以前的渴望'
}

let apps = [
  {
    name'linjunjie'
    entry'//localhost:215',  // 改成自己子应用的端口号
    container:'#subView'//节点 id   //  沙盒模式 
    // render:render,  // 普通模式   
    activeRule: genActiveRule('/star'),
    props:msg
  }
]
   //注册的子应用 参数为数组
registerMicroApps(apps,{
  beforeLoad: [
    app => {
      console.log(app)
      console.log('[LifeCycle] before load %c%s''color: green;', app.name);
    },
  ],
  beforeMount: [
    app => {
      console.log('[LifeCycle] before mount %c%s''color: green;', app.name);
    },
  ],
  afterUnmount: [
    app => {
      console.log('[LifeCycle] after unmount %c%s''color: green;', app.name);
    },
  ],
});


setDefaultMountApp('/star/linjunjie')

//开启沙盒模式
start({ 
   sandbox :{strictStyleIsolationtrue}
})

当微应用信息注册完之后,一旦浏览器的 url 发生变化,便会自动触发 qiankun 的匹配逻辑,所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中,同时依次调用微应用暴露出的生命周期钩子。

主应用为子应用准备的 展示元素

<template>
  <div id="app">
    <div id="nav">
      <!--//主应用 为子应用的跳转dom-->
      <div @click="onChangePage('/star/linjunjie')" >林俊杰</div>
      <div @click="onChangePage('/star/zhangyixin')" >张艺兴</div>
   
    </div>
<!--//用来展子应用的 内容区-->
     <div id="subView" class="sub-content-wrap" v-html="content"></div>
  </div>

</template>

<script>

  import { mapState } from 'vuex';
  export default{
    data(){
      return {
     
      }
    },
    computed:{
    //获取子应用HTML 数据
       ...mapState('microApp', ['content']),
       ...mapState('microApp', ['mircoAppLoading']),
    },

    methods:{
    
      //定义跳转方法
      onChangePage(url){
        console.log(url)
        
        this.routerGo(url, '我喜爱的男明星')
      },
  
      routerGo(href = '/', title = null, stateObj = {}) {
        window.history.pushState(stateObj, title, href); 
      },
    }
 }
</script>



子应用配置

关于子应用的配置相对较简单 , 不需要额外下载qiankun 主要将生命钩子 导出即可

导出响应的生命钩子

导出 bootstrapmountunmount 三个生命周期钩子,以供主应用在适当的时机调用。注意,实例化路由时,判断当运行在qiankun环境时,路由要添加前缀,前缀与主应用注册子应用函数genActiveRule("/subdemo")内的参数一致

'star' 值需要与主应用的值对应 genActiveRule("/star") 中的值需要商定好 主应用与微应用都要使用

如果 new VueRouter 不在main.js  中 配置 ,请将此配置移动到 main.js  方便管理

import routes from './router' //将路由信息导出方便使用 

let router = null;
let instance = null;

function render(props = {}{
  const { container } = props;
  router = new VueRouter({
    basewindow.__POWERED_BY_QIANKUN__ ? '/star' : '/',  
    mode'history',
    routes,
  });

  instance = new Vue({
    router,
    store,
    renderh => 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{
 //props 包含主应用传递的参数  也包括为子应用 创建的节点信息
  console.log(props)
  render(props);
}

export async function unmount({
  instance.$destroy();
  instance = null;
  router = null;
}

配置微应用的打包工具

除了代码中暴露出相应的生命周期钩子之外,为了让主应用能正确识别微应用暴露出来的一些信息,微应用的打包工具需要在vue.config.js 中 增加如下配置:

const packageName = require('./package.json').name;

module.exports = {
output: {
library: `${packageName}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${packageName}`,
},
};

子应用判断

子应用中新建 publicPath.js  在main.js 引入
if (window.__POWERED_BY_QIANKUN__) { 
//处理资源
 __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 
}

处理 资源加载问题

配置 vue.config.js

module.exports = {
  publicPath:`//localhost:${port}`,
}

vue.config.js 完整配置

const path = require('path');
const packageName = require('./package').name;

function resolve(dir{
  return path.join(__dirname, dir);
}

const port = 7101// dev port
module.exports = {

  publicPath:`//localhost:${port}`,
  outputDir'dist',
  assetsDir'static',
  filenameHashingtrue,
 
  devServer: {
    // host: '0.0.0.0',
    hot: true,
    historyApiFallbacktrue,//添加 重点
    port,
    overlay: {
      warningsfalse,
      errorstrue,
    },
    headers: {
      'Access-Control-Allow-Origin''*',
    },
  },

  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    output: {
      library`${packageName}-[name]`,
      libraryTarget'umd',
      jsonpFunction`webpackJsonp_${packageName}`,
    },
  },
};



采坑记录

当前页面为子应用时, 刷新页面404

以下方式均为主应用配置

  • 方式一 删除 mode 配置项

    mode: 'history', //   将此配置代码删除
  • 方式二 配置404  页面

如果没有注释掉mode: 'history'  此参数 将404 页面重新导向  home首页

{
    path'*',
    name'indexNotFound',
    componentresolve => require(['@/components/home'], resolve),
    children: HomeChild,
},

子应用 样式隔离 开始沙箱模式 遇到的问题

  • 主应用配置sandbox :{strictStyleIsolation: true}渲染模式由 render 模式 改为 containercontainer:'#subView', 此时 子应用的 挂载 dom  为 <div id="subView"> </div>   谨记主 container :#+id

  • 子应用配置 上文有提到  主要代码 截取

  instance = new Vue({
    router,
    store,
    renderh => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app'); //重点

遇到的问题: 开启沙箱模式,如果是 采用 render 模式会报错 ,固选择container 模式

效果图

写到这里,项目已经构建完成了 让我们来看看效果吧

这里是完整代码 方便大家学习 代码github地址:https://github.com/zxh1307/qiankun-vue

项目问题

  • 为啥我项目启动后看不到子应用的效果

    将master 主应用 main.js 中 注册的 子应用的端口号 改成自己项目的端口号即可

结语

开发中还有其他坑 忘记记录了, 千万记得项目部署子应用资源跨域的问题 , 需要Nginx配置跨域问题.

浏览 23
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报