前沿

這幾年后端的微服務是比較火爆，我們公司目前只要是新項目，基本上都是基于微服務去架構的，那么微前端是什么呢？

微前端是借鑒了微服務的架構理念，核心在于將一個龐大的前端應用拆分成多個獨立靈活的小型應用，每個應用都可以獨立開發、獨立運行、獨立部署，再將這些小型應用融合為一個完整的應用，或者將原本運行已久、沒有關聯的幾個應用融合為一個應用。微前端既可以將多個項目融合為一，又可以減少項目之間的耦合，提升項目擴展性，相比一整塊的前端倉庫，微前端架構下的前端倉庫傾向于更小更靈活

為什么不用iframe

以前我們為了把幾個獨立運行的小型應用合并成一個應用都是通過iframe的方式去實現的，如果不考慮體驗問題，iframe 幾乎是最完美的微前端解決方案了。

iframe 最大的特性就是提供了瀏覽器原生的硬隔離方案，不論是樣式隔離、js 隔離這類問題統統都能被完美解決。但他的最大問題也在于他的隔離性無法被突破，導致應用間上下文無法被共享，隨之帶來的開發體驗、產品體驗的問題

micro-App的優勢

micro-app不是基于iframe架構的

1、使用簡單

micro-app提供了js沙箱、樣式隔離、元素隔離、預加載、數據通信、靜態資源補全等一系列完善的開箱即用功能

2、零依賴

micro-app沒有任何依賴

3、兼容所有框架

為了保證各個業務之間獨立開發、獨立部署的能力，micro-app做了諸多兼容，在任何技術框架中都可以正常運行。

簡單使用

下面我講一下如何在Vue中使用micro-app

1、初始化一個基座應用

// 初始化一個vue應用
// 大家可以理解這是一個基座應用
// 就是把其它的應用都向它身上集成
vue create main-app

// 安裝micro-app 依賴
npm i @micro-zoe/micro-app --save

2、基座應用的文件修改

main.js修改

// 入口main.js
import Vue from "vue";
import App from "./App.vue";
// 路由信息
import router from "./router.js";
// 引入微前端
import microApp from "@micro-zoe/micro-app";

Vue.config.productionTip = false;

// 微前端基座應用啟動
microApp.start();

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

router.js修改

// router.js 文件如下
import Vue from "vue";
import Router from "vue-router";
import mainPage from "../views/main-page.vue";

const routes = [
  {
    // 非嚴格匹配，/main-page/* 都指向 mainPage 頁面
    path: "/main-page/*",
    name: "main-page",
    component: mainPage,
  },
];

const router = new Router({
  mode: "history",
  // 設置主應用基礎路由為main-page
  // 子應用基礎路由為/main-page/xxx
  base:'main-page',
  routes,
});

export default router

3、main-page.vue頁面

<template>
  <div>
    // 下面就是要接入的子應用url
    <h1>子應用</h1>
    // name(必傳)：應用名稱
    // url(必傳)：應用地址，會被自動補全為http://localhost:3000/index.html
    // baseroute(可選)：基座應用分配給子應用的基礎路由，就是上面的 `/main-page`
     -->
    <micro-app name='app1' url='http://localhost:3000/' baseroute='/main-page'></micro-app>
  </div>
</template>

4、創建一個子應用

// 初始化一個vue應用
vue create child-app

5、子應用的router.js文件修改

const router = new Router({
  mode: "history",
  // __MICRO_APP_BASE_ROUTE__ 為micro-app傳入的基礎路由
  base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
  routes,
});

6、src目錄下新建public-path.js

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

7、main.js 引入public-path.js

// main.js
import Vue from "vue";
import App from "./App.vue";
import router from './router.js'
import "./public-path";

Vue.config.productionTip = false;

const app = new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

// 監聽卸載操作
window.addEventListener("unmount", function () {
  app.$destroy();
});

到此這個簡單的微應用就搭好了

覺得效果不錯的請幫忙加個關注點個贊，經常分享前端實用開發技巧