背景

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

随着SPA大规模的应用，紧接着就带来一个新问题：一个规模化应用需要拆分。

微前端框架的优点

技术栈无关主框架不限制子应用的技术栈
独立开发、独立部署、仓库独立
在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
独立运行时微应用状态隔离

理论就不多说了，也不贴图了，直接上代码

新建主应用

使用vue创建main应用，在主应用中引入qiankun

vue create main
新增router文件(这里使用的是4.0)，这里使用history模式

js 复制代码

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/home";
import About from "../views/abort";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = createRouter({
  routes,
  base: "",
  history: createWebHistory()
});

export default router;

新建actions.js，处理全局变量,这里简单列了几个初始变量，也可以不写

js 复制代码

import { initGlobalState } from 'qiankun'

const initialState = {
  username: null,
  email: null,
  cake: null
}

const actions = initGlobalState(initialState);

actions.onGlobalStateChange((state, prev) => {
  for (const key in state) {
    initialState[key] = state[key]
  }
})

actions.getGlobalState = (key) => {
	return key ? initialState[key] : initialState
}

export default actions

在app.vue中配置下测试链接和子应用的容器

html 复制代码

<template>
    <div class="child-app">
            <div id="nav">
                <router-link to="/">Home</router-link> |
                <router-link to="/about">About</router-link> |
                <router-link to="/vue2/home">vue Home</router-link> |
                <router-link to="/vue2/about">vue About</router-link> |
                <router-link to="/vue3/home">vue3 Home</router-link> |
                <router-link to="/vue3/about">vue3 about</router-link> |
                <router-link to="/react">react Home</router-link>
            </div>
            <router-view />
            <div id="vue2"></div>
            <div id="vue3"></div>
            <div id="react"></div>
    </div>
</template>

在main.js中引入qiankun并注册子应用，开启沙箱模式。需要注意处理不同子应用之间跳转undefined问题。apps中配置子应用，这里以vue和react做了举例，props中可以添加自定义参数传输到子应用。子应用的域名在.env中根据环境变量配置，如开发环境可以配置http://localhost:8081 （配置地址需要和对应子应用一致）

js 复制代码

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

import { registerMicroApps, start } from "qiankun";
import actions from './actions'

// 解决不同路由跳转undefined问题
import _ from "lodash"
router.beforeEach((to, from, next) => {
  if (_.isEmpty(history.state.current)) {
    console.log(history.state, from.fullPath)
    _.assign(history.state, { current: from.fullPath });
  }
  next();
});

const apps = [
  {
    name: "vue2", //子应用的名称
    entry: process.env.VUE_APP_SUB_VUE2, //子应用的域名
    container: "#vue2", //承载子应用的容器，在上面App.vue中定义
    activeRule: "/vue2", // 被激活的子应用的路由
    props: {
      baseUrl: '/vue2',
      getGlobalState: actions.getGlobalState
    }
  },
  {
    name: "vue3",
    entry: process.env.VUE_APP_SUB_VUE3,
    container: "#vue3",
    activeRule: "/vue3",
    props: {
      baseUrl: '/vue3',
      getGlobalState: actions.getGlobalState
    }
  },
  {
    name: "react", //子应用的名称
    entry: process.env.VUE_APP_SUB_REACT,
    container: "#react",
    activeRule: "/react",
    props: {
      baseUrl: '/react',
      getGlobalState: actions.getGlobalState
    }
  },
];

registerMicroApps(apps); //注册子应用
start({
  sandbox: true // 开启沙箱模式
}); //启动qiankun

createApp(App).use(router).mount("#app");

新建子应用-vue2

新建流程同主应用
添加router文件，这里只添加基础配置，在main中去初始化，因为需要用到父应用传入的baseUrl

js 复制代码

import Home from "../views/home.vue";
import About from "../views/about.vue";

const routes = [
  {
    path: "/",
    redirect: '/home',
  },
  {
    path: "/home",
    name: "home",
    component: Home,
  },
  {
    path: "/about",
    name: "About2",
    component: About,
  },
];

export default routes;

新建actions.js

js 复制代码

const empty = () => {
  console.log('empty now')
}

// 使用父actions暴露的函数覆盖此
class Actions {
  actions = {
    onGlobalStateChange: empty,
    setGlobalState: empty,
    getGlobalState: empty
  }
  setActions(actions) {
    this.actions = actions
  }
  onGlobalStateChange(...args) {
    return this.actions.onGlobalStateChange(...args);
  }
  setGlobalState(...args) {
    return this.actions.setGlobalState(...args);
  }
  getGlobalState(key) {
    return this.actions.getGlobalState(key);
  }
}
export default new Actions();

main.js中注册router，配置__webpack_public_path__

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import routes from './router'
import { createRouter, createWebHistory } from "vue-router";
import actions from './actions'

let instance;

function render(props = {}) {
  // 加载vue实例
  const { container, baseUrl } = props
  actions.setActions(props) // props中有onGlobalStateChange、setGlobalState等函数
  const router = createRouter({
    routes,
    base: window.__POWERED_BY_QIANKUN__ ? baseUrl : process.env.BASE_URL,
    history: createWebHistory(baseUrl)
  });
  instance = createApp(App)
  instance.use(router).mount(container ? container.querySelector('#sub-vue2') : '#sub-vue2') 
  // #sub-vue2为index中的容器div id
}

// 独立运行微应用
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// 被主应用使用时
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// 抛出三个生命周期钩子，供主应用调用

export async function bootstrap() {}

export async function mount(props) {
  render(props)
}

export async function unmount() {
  instance?.unmount();
  instance = null;
}

main.js中__webpack_public_path__会报错undefined,需要在package.json中配置

js 复制代码

"eslintConfig": {
    "globals": {
      "__webpack_public_path__": true
    },
  },

在vue.config.js中，导出格式需要设置成umd（为了让各种规范的模块可以通用，在不同的环境下都可以正常运行，就出现了umd这个通用格式），开发环境记得配置下跨域哦，生产环境需要nginx配置下白名单

js 复制代码

devServer: {
    port: 8081,
    headers: {
      "Access-Control-Allow-Origin": "*", // 主应用获取子应用时跨域响应头
    },
  },
  configureWebpack: {
    output: {
      library: `vue2`,
      libraryTarget: "umd",
    },
  },

新建子应用vue3

使用vite创建
vue3的router.js、actions.js参考vue2
qiankun不兼容vite，所以需要第三方插件vite-plugin-qiankun支持，在main.js中引入

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import routes from './router'
import { createRouter, createWebHistory } from "vue-router";
import {
  renderWithQiankun,
  qiankunWindow
} from 'vite-plugin-qiankun/dist/helper'
import actions from './actions'

let instance;

function render(props = {}) {
  // 加载vue实例
  const { container, baseUrl } = props
  actions.setActions(props) // props中有onGlobalStateChange、setGlobalState等函数
  const router = createRouter({
    routes,
    base: qiankunWindow.__POWERED_BY_QIANKUN__ ? baseUrl : '/',
    history: createWebHistory(baseUrl)
  });
  instance = createApp(App)
  instance.use(router).mount(container ? container.querySelector('#sub-vue3') : '#sub-vue3')
}

const initQianKun = () => {
  renderWithQiankun({
    bootstrap() {},
    mount(props) {
      render(props)
    },
    unmount() {
      instance.unmount()
      instance = null
    }
  })
}
qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render()

vite.config中配置跨域

js 复制代码

server: {
    port: 8083,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },

新建react子应用

npx create-react-app subreact
安装react-router-dom、react-app-rewired（重写部分webpack配置，需新建config-overrides）
新建action.js和package.json globals配置同vue2
index.js中添加基础配置

js 复制代码

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from 'react-router-dom'
import actions from './actions'
let root = null
function render({ baseUrl } = {}) {
  root = ReactDOM.createRoot(document.getElementById("sub-react"));
  root.render(
    <React.StrictMode>
      <BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? baseUrl : '/'}>
        <App />
      </BrowserRouter>
    </React.StrictMode>
  );
}

// 被主应用使用时
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// 独立运行微应用
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// 导出生命周期函数

export async function bootstrap() {}

export async function mount(props) {
  actions.setActions(props)
  render(props);
}

export async function unmount(props) {
  root.unmount();
}

export async function update() {
  // 更新微应用
}

reportWebVitals();

App.js中添加路由配置

jsx 复制代码

import './App.css';
import { Routes, Route, Link, Navigate } from "react-router-dom"
import Home from './views/home'
import About from './views/about'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Link to='/home'>首页</Link>
        <Link to='/about'>关于</Link>
      </header>
      <div className='content'>
        <Routes>
          <Route path="/" element={<Navigate to="/home"/>} />
          <Route path="/home" element={<Home />}></Route>
          <Route path="/about" element={<About />}></Route>
        </Routes>
      </div>
    </div>
  );
}

export default App;

根目录下新建config-overrides.js,导出umd格式，并支持跨域

js 复制代码

module.exports = {
  webpack:(config)=>{
    config.output.library = 'react';
    config.output.libraryTarget = 'umd';
    return config;
  },
  devServer:(configFunction)=>{
    return function (proxy,allowedHost){
      const config = configFunction(proxy,allowedHost);
      config.headers = {
        "Access-Control-Allow-Origin":'*'
      }
      return config
    }
  }
}

修改package.json中命令，使用react-app-rewired（build）

js 复制代码

"start": "set PORT=8082 && react-app-rewired start"，
"build": "react-app-rewired build",

子应用和主应用数据交互

子应用更新数据
- 如vue文件，引入actions.js，调用actions.setGlobalState({ XXX: XXX })设置数据，
- actions.getGlobalState('XXX')获取数据，
- actions.onGlobalStateChange((state, prev) => { console.log(state, prev) })监听数据变化

打包部署

这里项目都放在一起，打包的话可以并行

js 复制代码

    "build": "npm-run-all build:* && ./scripts/bundle.sh",
    "build:vue2": "cd vue2 && yarn build",
    "build:vue3": "cd vue3 && yarn build",
    "build:react": "cd subreact && yarn build",
    "build:main": "cd main && yarn build",

bundle.sh写入执行脚本，复制各子应用文件到dist中

shell 复制代码

#!/bin/bash

rm -rf ./dist

mkdir ./dist
mkdir ./dist/subapp

cp -r ./subreact/build/ ./dist/subapp/react/
cp -r ./vue2/dist/ ./dist/subapp/vue2/
cp -r ./vue3/dist/ ./dist/subapp/vue3/
cp -r ./main/dist/ ./dist/main/

echo 'bundle.sh over and leile.'

如果子应用部署在不同服务器下，nginx部署，记得配置下跨域，主应用的域名

前端微服务-qiankun实践

背景

微前端框架的优点

新建主应用

新建子应用-vue2

新建子应用vue3

新建react子应用

子应用和主应用数据交互

打包部署