微前端利用分为主利用与子利用，部署形式是别离编译好主利用与子利用，将主利用与子利用部署到 nginx 配置好的目录即可。
代码仓库 https://github.com/jwchan1996/qiankun-micro-app
别离进入 portal、app1、app2 根目录，执行:
开发模式# portalyarnyarn start# app1、app2npm installnpm run dev生产模式# portalyarn build# app1、app2npm run build主利用主利用 js 文件引入 qiankun 注册子利用，并编写导航页显示跳转逻辑。
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>QianKun Example</title></head><body> <div class="mainapp"> <!-- 标题栏 --> <header class="mainapp-header"> <h1>导航</h1> </header> <div class="mainapp-main"> <!-- 侧边栏 --> <ul class="mainapp-sidemenu"> <li class="app1">利用一</li> <li class="app2">利用二</li> </ul> <!-- 子利用 --> <main id="subapp-container"></main> </div> </div> <script src="./index.js"></script></body></html>主利用 js 入口文件：
import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start, initGlobalState } from 'qiankun';import './index.less';/** * 主利用 **能够应用任意技术栈** * 以下别离是 React 和 Vue 的示例，可切换尝试 */import render from './render/ReactRender';// import render from './render/VueRender';/** * Step1 初始化利用（可选） */render({ loading: true });const loader = loading => render({ loading });/** * Step2 注册子利用 */registerMicroApps( [ { name: 'app1', entry: process.env.NODE_ENV === 'production' ? '//192.168.2.192:7100' : '//localhost:7100', container: '#subapp-viewport', loader, activeRule: '/app1', }, { name: 'app2', entry: process.env.NODE_ENV === 'production' ? '//192.168.2.192:7101' : '//localhost:7101', container: '#subapp-viewport', loader, activeRule: '/app2', } ], { beforeLoad: [ app => { console.log('[LifeCycle] before load %c%s', 'color: green;', app.name); }, ], beforeMount: [ app => { console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name); }, ], afterUnmount: [ app => { console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name); }, ], },);const { onGlobalStateChange, setGlobalState } = initGlobalState({ user: 'qiankun',});onGlobalStateChange((value, prev) => console.log('[onGlobalStateChange - master]:', value, prev));setGlobalState({ ignore: 'master', user: { name: 'master', },});/** * Step3 设置默认进入的子利用 */// setDefaultMountApp('/app1');/** * Step4 启动利用 */start();runAfterFirstMounted(() => { console.log('----------------------------------') console.log(process.env.NODE_ENV) console.log('----------------------------------') console.log('[MainApp] first app mounted');});//浏览器地址入栈function push(subapp) { history.pushState(null, subapp, subapp) }//配合导航页显示逻辑function initPortal(){ //主利用跳转 document.querySelector('.app1').onclick = () => { document.querySelector('.mainapp-sidemenu').style.visibility = 'hidden' push('/app1') } document.querySelector('.app2').onclick = () => { document.querySelector('.mainapp-sidemenu').style.visibility = 'hidden' push('/app2') } //回到导航页 document.querySelector('.mainapp-header h1').onclick = () => { push('/') } if(location.pathname !== '/'){ document.querySelector('.mainapp-sidemenu').style.visibility = 'hidden' }else{ document.querySelector('.mainapp-sidemenu').style.visibility = 'visible' } if(location.pathname.indexOf('login') > -1){ document.querySelector('.mainapp-header').style.display = 'block' }else{ document.querySelector('.mainapp-header').style.display = 'none' } //监听浏览器后退回退 window.addEventListener('popstate', () => { if(location.pathname === '/'){ document.querySelector('.mainapp-sidemenu').style.visibility = 'visible' } if(location.pathname.indexOf('login') > -1){ document.querySelector('.mainapp-header').style.display = 'block' }else{ document.querySelector('.mainapp-header').style.display = 'none' } }, false)}initPortal()docker nginx 配置此处 nginx 次要作用是用于端口目录转发，并配置主利用拜访子利用的跨域问题。
...