wujie初步使用

背景：qiankun转wujie，由于我们部门使用的是qiankun，需要协助的部门使用的是wujie，所以需要自己先技术调研一下，最后发现wujie真香。

一、wujie的收益（优点）

二、项目使用

项目中使用主要分以下方面

1. 主项目改造

// 按装wujie
yarn install wujie-vue3 （提示可以根据主应用是vue框架使用wujie-vue,react框架使用wujie-react）
// main.js 文件改造
import WujieVue from 'wujie-vue3'
app.use(WujieVue)
//app.vue文件改造

<template lang="pug">
//- RouterView
//- name一般是个变量
WujieVue(
    width="100%"
    height="100%"
    name="brokerage"
    :url="url"
    :sync="true"
    :props="testPorps"
    )
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import LS from '@/utils/local-storage'
import { IS_LOCAL_DEV } from '@/utils/env/DOMAIN'

export default defineComponent({
    name: 'PageLayout',
    components: {},
    data() {
        return {
            url: IS_LOCAL_DEV
                ? 'http://localhost:8081/admin/index.html#/index'
                : 'https://cicchk-admin-dev.feisima.com/admin/#/index',
        }
    },
    setup() {
        const testPorps = ref({
            test: 'test',
            token: LS.get('SG-TOKEN'),
            language: 'zh-CN',
        })
        return {
            testPorps,
        }
    },
})
</script>

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

2、子项目改造

wujie对子项目侵入非常小，在满足跨域条件下子应用可以不用改造

主项目传递的参数都在window.$wujie.props上可以直接使用

3、项目中遇到的问题及解决方案

1、子项目依赖主项目，主项目启动子项目才可以正常展示？

// 在子项目中根据wujie提供的全局变量，window.POWERD_BY_WUJIE__ 来判断是否是wujie环境，如果是wujie环境取wujie传递过来的token和langauge及一些其他全局配置，没有则取自己的
if (window.__POWERED_BY_WUJIE__) {
    lang = langMap[window.$wujie.props.language]
    LS.put('langKey', lang)
} else {
    lang = LS.get('langKey')
}
 const _token = data.token || LS_TOKEN || window.$wujie.props.token

2、实际场景，子项目和主项目通讯

如图所示绿色框内容是主项目的通用框架和菜单，红色是子项目展示内容，父项目点击菜单直接改变路由是不会改变页面的需要通过子项目自身页面路由改变才行所以只能通过$bus,$on才可以

子项目

父项目