來源：京東技術

導讀

本文將深入淺出地探討微前端架構模式——MicroApp，從微前端的基本概念、核心優勢以及如何在現代web開發中實現它，詳解微前端如何使得大型應用能夠分解為小型、簡單、可獨立開發和部署的子應用，同時還能保持各個子應用間的完整性和協調性。此外，本文還將探討實施微前端時可能遇到的挑戰和最佳實踐，為開發者提供一條清晰的實施路徑，幫助其構建更加靈活和可維護的前端生態系統。

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

"@micro-zoe/micro-app": "^1.0.0-alpha.7"

import microApp from '@micro-zoe/micro-app'
microApp.start()

 {    path: '/yp',    name: 'yp',    linkHidden: true,    linkDisable: true,    breadcrumbClose: true,    component: '@/pages/yp-app',  }

import React from 'react';import config from '@/config';
// /** @jsxRuntime classic */// /** @jsx jsxCustomEvent */// import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event';
export default (): React.ReactElement => {
  // 子應用點選了麵包屑的回到首頁  const onDispathChild = (e: any) => {    const { isBackHome } = e.detail.data;    if (isBackHome) window.location.href = '/';  };
  return (    <>      <micro-app name="yp" url={config?.yp} onDataChange={onDispathChild} />    </>  );};

//config.tslet config = {  yp: '本地環境子應用的路由字首};
const isEnvPro = process.env.NODE_ENV === 'production';
if (isEnvPro) {  config = {    yp: '預發環境環境子應用的路由字首  };}
export default config;//以上是config.ts檔案的全部-----end

//選單點選事件裡面的內容
history.push('/yp'); //切換到子應用
setTimeout(() => {    microApp.router.push({      name: 'yp',//和子應用的name要保持一致，為了匹配到對應子應用的路由      path: `${config.yp}${item.url}`,    }); //跳轉子應用的路由，其中config是上面的配置檔案，根據不同的環境取對應環境的子應用，item是當前點選的選單路徑資訊}, 500);

devServer: {  headers: {    'Access-Control-Allow-Origin': '*',  }},

@Override    public void init(FilterConfig filterConfig) {        this.origins = Lists.newArrayList(");    }

proxy: (() => {  return {    //  本地訪問預發    '/avoid': {      target: '(req) => {        if(req.headers.accept.indexOf('html') !== -1 ) {          return '/index'        }      },    }  }})()