微前端架构-无界实战微前端是什么微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及

微前端是什么

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

技术栈无关

主框架不限制接入应用的技术栈，微应用具备完全自主权
独立开发、独立部署

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

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

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

正好公司一个老古董项目拿来进行改造 慢慢的进行减重

首先

主应用改造 ( 先来个简单的毕竟是个老项目能不动就先不动能跑就行 )

//安装依赖
npm install wujie-vue2 -S

main.js

import WujieVue from "wujie-vue2";
const { bus, setupApp, preloadApp, destroyApp } = WujieVue;
Vue.use(WujieVue);

业务页面中引用

<template>
    <WujieVue width="100%" height="100%" name="vehicleInspectionData" :url="url" :props="props" :plugins="plugins"
        :sandbox="sandboxConfig">
    </WujieVue>
</template>

<script>
import {
    getToken
} from "@/utils/auth";
export default {
    data() {
        return {
            url: 'http://localhost:7400/',
            sandboxConfig: {
                // 开启样式隔离
                strictStyleIsolation: true,
                // 开启 scopedCSS 模式，会将子应用的样式转换为类似 Vue scoped 样式的形式
                scopedCSS: true,
            },
        }
    },
    computed: {
        props() {
            return {
                token: getToken(),
            }
        },
        plugins() {
        }
    },
    mounted() {
    },
}
</script>

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

好了主应用暂时简单改造完成接下来子应用

先创建个vue2子应用

vue create children-vue2

App.vue 接受传递过来的参数例如:token等

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {

    }
  },
  mounted() {
    const props = window.$wujie?.props;
    this.$store.dispatch('setToken', props.token)
    if (window.__POWERED_BY_WUJIE__) { document.documentElement.classList.add("isDialog") }
  }
}
</script>

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

vue.config.js 进行跨域配置不然主应用访问不到

module.exports = {
  devServer: {
    //解决主应用访问跨域问题
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "*",
      "Access-Control-Allow-Methods": "*",
    },
    port:7400,
    //代理ip  ajax使用的
    proxy: {
      '/api': {
        target: 'xxxxxx',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

ok 目前分别启动项目可以跑起来但是

问题1:样式冲突尤其是弹框以及下拉框,时间弹出框等等那些会产生位置偏移问题

body中添加样式position: relative !important;

body中添加样式 .isDialog .el-popper { position: absolute !important; }

App中添加全局类名 isDialog

index.html中

body {
   position: relative !important;
 }

 .isDialog .el-popper {
   position: absolute !important;
 }

App.vue中mounted中添加如果在无界环境下添加类名

if (window.__POWERED_BY_WUJIE__) { document.documentElement.classList.add("isDialog") }

问题2:路由同步问题接下来再做

微前端架构-无界实战

微前端是什么​

微前端是什么