微前端无界 项目使用记录

1预期目标和场景

一个vue框架开发的应用，需要使用另一个系统的页面。
通俗来说，就是在一个web应用中独立的运行另一个web应用

2 技术支持

微前端处理方案：无界
无界官网： https://wujie-micro.github.io/doc/guide/

CSDN 参考文档

3 方案可行性测试

3.1项目技术

主系统：绩效考核系统 vue2+webpack
子系统可以是vue2 vue3 react 或angular

3.2案例测试
目标
vue2作为主系统，展现子系统vue2中的页面，并传值。
具体步骤
第一步：主系统上安装无界插件

1.	# vue2 框架
2.	npm i wujie-vue2 -S

第二步 引入主系统 在main.js中引入

// 无界部分
import WujieVue from "wujie-vue2";
Vue.use(WujieVue)const { setupApp} = WujieVue;
setupApp({name: "vue2",url:"http://10.100.21.21:7200",exec: true,
});new Vue({el: '#app',router,components: { App },template: '<App/>'
})

第三步 主系统新建一个页面 test.vue
并以props方式传值

<template><!--单例模式，name相同则复用一个无界实例，改变url则子应用重新渲染实例到对应路由 -->
<WujieVue 
width="100%" 
height="100%" 
name="vue2" 
:url="vue2Url" 
:sync="true" 
:props="{ data: {page:'我是主系统的参数',type:1} }">>
</WujieVue></template><script>export default {data() {return {vue2Url: "http://10.100.21.21:7200",};},methods: {},};</script><style lang="less" scoped></style>

第四步 另一台电脑创建子系统vue2

main.js中配置

if (window.__POWERED_BY_WUJIE__) {let instance;window.__WUJIE_MOUNT = () => {const router = new VueRouter({ base, routes });instance = new Vue({ router, render: (h) => h(App) }).$mount("#app");};window.__WUJIE_UNMOUNT = () => {instance.$destroy();};
} else {new Vue({ router: new VueRouter({ base, routes }), render: (h) => h(App) }).$mount("#app");
}

Vue.config配置跨域

// vue.config.js/*** @type {import('@vue/cli-service').ProjectOptions}*/
module.exports = {publicPath: "./",devServer: {headers: {"Access-Control-Allow-Origin": "*","Access-Control-Allow-Headers": "*","Access-Control-Allow-Methods": "*",},port: "7200",},transpileDependencies: ["sockjs-client",],
};

App.vue中，展示传值

最终测试效果

4 附注

本例测试了无界的核心功能，引入页面，和传值。其他功能和能力，请参考无界官网API。
https://wujie-micro.github.io/doc/guide/
目前无界子系统，可以是目前主流前端vue,react angular12，详见官网。