天天看點
傳回

微前端 qiankun 項目實踐 !!! 防踩坑指南

作者：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,
      render: h => 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 :{strictStyleIsolation: true}
})

複制

當微應用資訊注冊完之後，一旦浏覽器的 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 主要将生命鈎子 導出即可

導出響應的生命鈎子

導出

bootstrap

、

mount

、

unmount

三個生命周期鈎子，以供主應用在适當的時機調用。注意，執行個體化路由時，判斷當運作在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({
    base: window.__POWERED_BY_QIANKUN__ ? '/star' : '/',  
    mode: 'history',
    routes,
  });

  instance = new Vue({
    router,
    store,
    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) {
 //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',
  filenameHashing: true,
 
  devServer: {
    // host: '0.0.0.0',
    hot: true,
    historyApiFallback: true,//添加 重點
    port,
    overlay: {
      warnings: false,
      errors: true,
    },
    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',
    component: resolve => require(['@/components/home'], resolve),
    children: HomeChild,
},

複制

子應用 樣式隔離 開始沙箱模式 遇到的問題

  • 主應用配置

    sandbox :{strictStyleIsolation: true}

     渲染模式由 render 模式 改為 container

    container:'#subView'

     , 此時 子應用的 挂載 dom 為

    <div id="subView"> </div>

     謹記主 container :#+id
  • 子應用配置 上文有提到 主要代碼 截取 
instance = new Vue({
    router,
    store,
    render: h => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app'); //重點

複制

遇到的問題: 開啟沙箱模式,如果是 采用 render 模式會報錯 ,固選擇container 模式

效果圖

寫到這裡,項目已經建構完成了 讓我們來看看效果吧

這裡是完整代碼 友善大家學習 代碼github位址:https://github.com/zxh1307/qiankun-vue

項目問題

  • 為啥我項目啟動後看不到子應用的效果

    将master 主應用 main.js 中 注冊的 子應用的端口号 改成自己項目的端口号即可

結語

開發中還有其他坑 忘記記錄了, 千萬記得項目部署子應用資源跨域的問題 , 需要Nginx配置跨域問題.

上一篇: zubax_gnss簡介
下一篇: 在eclipse下，給ArduCopter飛控，添加subMenuTest指令