微前端框架之Wujie

Wujie简介

无界的官网是这样解释的

具体的大家可以去官网看一下，官网上也有现成的例子，喜欢的也可以去看一下，这里只是记录一下我在项目中的使用。因为公司使用的技术框架是Vue，所以这里也是基于vue的使用。
我这里是新建的三个独立的vue项目

#项目主入口
main_view
#子项目1
sub_app_page1
#子项目2
sub_app_page2

安装

在主项目main_view 中安装 Wujie

# vue2 框架
npm i wujie-vue2 -S
# vue3 框架
npm i wujie-vue3 -S

引入

在 主项目main_view的main.js中引入

//根据自己的实际情况引入对应的版本
//vue2
import WujieVue from "wujie-vue2";
// vue3
//import WujieVue from "wujie-vue3";

Vue.use(WujieVue);

另外需要建立sub_app_page1 和sub_app_page2两个menu

接下来需要在主项目main_view 的router里面新建两个路由

  {
    path: "/sub_app_page1",
    name: "sub_app_page1",
    component: () =>import( "@/subEntry/index.vue"),
  },
  {
    path: "/sub_app_page2",
    name: "sub_app_page2",
    component: () =>import( "@/subEntry/index.vue"),
  },

看一下 @/subEntry/index.vue中的代码

<template>
  <WujieVue
    class="wujie-vue-sub"
    width="100%"
    height="100%"
    :name="$route.name"
    :url="url"
    :loadError="errorHandler"
  ></WujieVue>
</template>

<script>
import WujieVue from 'wujie-vue2';
export default {
  name: 'index',
   computed: {
    url() {
      return this.urlDict[this.$route.name];
    }
  },
  data() {
  	return{
	 urlDict: {
        sub_app_page1: 'http://localhost:8082',
        sub_app_page2: 'http://localhost:8083',
      },
	name: '', //项目唯一标识
	}
  }
  mounted() {}
};
</script>

<style lang="scss"></style>

主要配置name 和 url ,其中name为 项目唯一标识，用户必须保证 ，url为需要渲染的地址，根据实际情况具体配置（具体配置参考这里）
好啦，这样三个项目就可以正常访问了（到目前为止sub_app_page1和sub_app_page2不需要配置任何东西）

写到这里有同学就会发现不对了，就是当我切换子系统的路由的时候，导航栏上面的地址并没有变化，这是有问题的，我们希望跟vue一样上面的地址随着路由的地址变化而变化

官网有提供解决方法，但是这个这个方法好像有bug，所以我们采用另一种解决方式使用bus去动态更新主项目的地址

//主项目中使用$on发出事件
 WujieVue.bus.$on('sub-route-change', (name, path) => {
 //这里动态更改导航栏上面的地址,name为项目标识，path为子项目当前路由地址
})
//子项目，监听路由变化，动态出发主项目的方法
  watch: {
    $route: {
      deep: true,
      handler() {
        window.$wujie.bus.$emit(
          'sub-route-change',
          'sub_app_page1',
          this.$route.path
        );
      }
    }
  },

官网有详细的例子，有兴趣可以下载看看