title: 微前端-基座搭建
date: 2023-04-23 19:30:00
categories: 基座搭建
tags: 微前端
微前端是現(xiàn)在企業(yè)級應(yīng)用無法避免的一個(gè)問題
微前端是一種類似于微服務(wù)的架構(gòu)咬腋，它將微服務(wù)的理念應(yīng)用于瀏覽器端洗鸵，即將單頁面前端應(yīng)用由單一的單體應(yīng)用轉(zhuǎn)變?yōu)榘讯鄠€(gè)小型前端應(yīng)用聚合為一的應(yīng)用次坡。各個(gè)前端應(yīng)用還可以獨(dú)立開發(fā)埃唯、獨(dú)立部署正罢。
微前端架構(gòu)旨在解決單體應(yīng)用在一個(gè)相對長的時(shí)間跨度下敷硅，由于參與的人員、團(tuán)隊(duì)的增多、變遷潭枣，從一個(gè)普通應(yīng)用演變成一個(gè)巨石應(yīng)用(Frontend Monolith)后，隨之而來的應(yīng)用不可維護(hù)的問題幻捏。這類問題在企業(yè)級 Web 應(yīng)用中尤其常見盆犁。
微前端的實(shí)現(xiàn)意味著對前端應(yīng)用的拆分。拆分應(yīng)用的目的并不只是為了在架構(gòu)上好看篡九，它還可以提升開發(fā)效率谐岁。比如 10 萬行的代碼拆解成 10 個(gè)項(xiàng)目，每個(gè)項(xiàng)目 1 萬行代碼榛臼，要獨(dú)立維護(hù)每個(gè)項(xiàng)目就會(huì)容易得多伊佃。而我們只需要實(shí)現(xiàn)應(yīng)用的自治，即實(shí)現(xiàn)應(yīng)用的獨(dú)立開發(fā)和獨(dú)立部署讽坏，就可以在某種程度上實(shí)現(xiàn)微前端架構(gòu)的目的锭魔。
對微前端架構(gòu)的對比個(gè)人偏好 micro-app
micro-app 是京東零售在 2021 年開源的一套微前端架構(gòu)
micro-app 的優(yōu)勢
- 使用簡單
我們將所有功能都封裝到一個(gè)類 WebComponent 組件中，從而實(shí)現(xiàn)在基座應(yīng)用中嵌入一行代碼即可渲染一個(gè)微前端應(yīng)用路呜。
同時(shí) micro-app 還提供了 js 沙箱迷捧、樣式隔離织咧、元素隔離、預(yù)加載漠秋、數(shù)據(jù)通信笙蒙、靜態(tài)資源補(bǔ)全等一系列完善的功能。
零依賴
micro-app 沒有任何依賴庆锦，這賦予它小巧的體積和更高的擴(kuò)展性捅位。兼容所有框架
為了保證各個(gè)業(yè)務(wù)之間獨(dú)立開發(fā)、獨(dú)立部署的能力搂抒，micro-app 做了諸多兼容艇搀，在任何技術(shù)框架中都可以正常運(yùn)行。
micro-app 的使用
- 基座項(xiàng)目搭建
純粹個(gè)人偏好,將基座獨(dú)立搭建成一個(gè)項(xiàng)目求晶，該項(xiàng)目的作用就是承載基座和路由配置管理,以及公共方法數(shù)據(jù)的派發(fā)監(jiān)聽焰雕。
使用 vue-cli 或者 webpack 創(chuàng)建項(xiàng)目,因?yàn)榫S護(hù)等問題目前在 vite 搭建的項(xiàng)目中還有很多坑不建議使用 vite，據(jù)官方所述會(huì)開發(fā) vite 兼容版本但是目前大環(huán)境下比較難等待后期再說芳杏。 - 當(dāng)你按照正常項(xiàng)目搭建好了之后就要下載 micro-app矩屁。
npm i @micro-zoe/micro-app --save
- 在入口文件中引入插件并且執(zhí)行
// main.js || index.js
import microApp from '@micro-zoe/micro-app'
microApp.start()
- 正常書寫路由,但是這個(gè)時(shí)候你要考慮將子系統(tǒng)放置的位置
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [{
path: '/',
name: 'Home',
component: () =>
import ('../components/Home.vue')
},
<!-- 這里都是承載子系統(tǒng)的組件，相當(dāng)于寫了一個(gè)放置<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
這里是基座放置子系統(tǒng)的文件 vue2Page.vue
// url就是你要導(dǎo)入進(jìn)來的子系統(tǒng)例如：https://www.baidu.com/百度
// vue2Page.vue配置
<template>
<div>
<h2>這是子應(yīng)用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/',
//基座 向子應(yīng)用發(fā)送信息 方式一
sendData:{
dec:"這個(gè)是父基座發(fā)送數(shù)據(jù)",
title:"打印出來看看吧"
}
}
}
}
</script>
這樣我們的基座就搭建好了爵赵，只要按照你需要的配置路由等吝秕。至于數(shù)據(jù)交互之類的可以后期需要的時(shí)候再配置
子系統(tǒng)配置
下面這些是我們在子系統(tǒng)開發(fā)中需要配置的
- 跨域支持
<!-- vue.config.js || -->
publicPath: '/vue2', // 配置子路徑地址
devServer: {
port: 3000, // 此端口號必須和基座中的micro-app中配置的url地址一致
headers: {
'Access-Control-Allow-Origin': '*' // 開啟跨域
}
}
- 資源路徑自動(dòng)補(bǔ)全
- 步驟 1: 在子應(yīng)用 src 目錄下創(chuàng)建名稱為 public-path.js 的文件，并添加如下內(nèi)容
// __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: 在子應(yīng)用入口文件的最頂部引入 public-path.js
// entry
import './public-path'
這樣就能渲染出來了空幻，這樣不管多少個(gè)項(xiàng)目都能獨(dú)立開發(fā)獨(dú)立部署烁峭，不限制技術(shù)棧了，只要將基座維護(hù)好有無限的可能氛悬。
個(gè)人博客：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/
`
