微前端-基座搭建

---

title: 微前端-基座搭建
date: 2023-04-23 19:30:00
categories: 基座搭建
tags: 微前端

---

微前端是现在企业级应用无法避免的一个问题

微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。

微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

微前端的实现意味着对前端应用的拆分。拆分应用的目的并不只是为了在架构上好看，它还可以提升开发效率。比如 10 万行的代码拆解成 10 个项目，每个项目 1 万行代码，要独立维护每个项目就会容易得多。而我们只需要实现应用的自治，即实现应用的独立开发和独立部署，就可以在某种程度上实现微前端架构的目的。

对微前端架构的对比个人偏好 micro-app

micro-app 是京东零售在 2021 年开源的一套微前端架构

micro-app 的优势

1. 使用简单
   我们将所有功能都封装到一个类 WebComponent 组件中，从而实现在基座应用中嵌入一行代码即可渲染一个微前端应用。

同时 micro-app 还提供了 js 沙箱、样式隔离、元素隔离、预加载、数据通信、静态资源补全等一系列完善的功能。

2. 零依赖
   micro-app 没有任何依赖，这赋予它小巧的体积和更高的扩展性。

3. 兼容所有框架
   为了保证各个业务之间独立开发、独立部署的能力，micro-app 做了诸多兼容，在任何技术框架中都可以正常运行。

micro-app 的使用

1. 基座项目搭建

   纯粹个人偏好,将基座独立搭建成一个项目，该项目的作用就是承载基座和路由配置管理,以及公共方法数据的派发监听。
   使用 vue-cli 或者 webpack 创建项目,因为维护等问题目前在 vite 搭建的项目中还有很多坑不建议使用 vite，据官方所述会开发 vite 兼容版本但是目前大环境下比较难等待后期再说。

2. 当你按照正常项目搭建好了之后就要下载 micro-app。

 npm i @micro-zoe/micro-app --save

3. 在入口文件中引入插件并且执行

// main.js || index.js
import microApp from '@micro-zoe/micro-app'

microApp.start()

4. 正常书写路由,但是这个时候你要考虑将子系统放置的位置

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
        path: '/',
        name: 'Home',
        component: () =>
            import ('../components/Home.vue')
    },
    <!-- 这里都是承载子系统的组件，相当于写了一个放置<router-view></router-view>的地方 -->
    {
        path: '/vue2/*',
        name: 'vue2',
        component: () =>
            import ('../components/vue2Page.vue')
    },
    {
        path: '/vue3/*',
        name: 'vue3',
        component: () =>
            import ('../components/vue3Page.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    routes,
})

export default router

这里是基座放置子系统的文件 vue2Page.vue

// url就是你要导入进来的子系统例如：https://www.baidu.com/百度
// vue2Page.vue配置
<template>
    <div>
      <h2>这是子应用vue2的页面</h2>
      <micro-app name='vue2Page'
                 :url='url'
                 baseroute='/vue2'
                 :data="sendData"
      ></micro-app>
    </div>
</template>

<script>
export default {
  name: 'vue2Page',
  data () {
    return {
      url:'//localhost:3000/vue2/',
      //基座 向子应用发送信息 方式一
      sendData:{
        dec:"这个是父基座发送数据",
        title:"打印出来看看吧"
      }
    }
  }
}
</script>

这样我们的基座就搭建好了，只要按照你需要的配置路由等。至于数据交互之类的可以后期需要的时候再配置

子系统配置

下面这些是我们在子系统开发中需要配置的

1. 跨域支持

<!-- vue.config.js || -->
 publicPath: '/vue2', // 配置子路径地址
    devServer: {
        port: 3000, // 此端口号必须和基座中的micro-app中配置的url地址一致
        headers: {
            'Access-Control-Allow-Origin': '*' // 开启跨域
        }
    }

2. 资源路径自动补全
   1. 步骤 1: 在子应用 src 目录下创建名称为 public-path.js 的文件，并添加如下内容

// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
if (window.__MICRO_APP_ENVIRONMENT__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}

2. 步骤 2: 在子应用入口文件的最顶部引入 public-path.js

// entry
import './public-path'

这样就能渲染出来了，这样不管多少个项目都能独立开发独立部署，不限制技术栈了，只要将基座维护好有无限的可能。
个人博客：https://843378894.github.io/2023/04/23/%E5%BE%AE%E5%89%8D%E7%AB%AF-%E5%9F%BA%E5%BA%A7%E6%90%AD%E5%BB%BA/

`