创建子应用
子应用不需要引入 qiankun 依赖，只需要暴露出几个生命周期函数就可以：
bootstrap，子应用首次启动时触发。mount，子应用每次启动时都会触发。unmount，子应用切换/卸载时触发。
现在将子应用的 文件改造一下：main.js
import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import routes from './router' import store from './store' Vue.config.productionTip = false let router = null let instance = null function render(props = {}) { const { container } = props router = new VueRouter({ // hash 模式不需要下面两行 base: window.__POWERED_BY_QIANKUN__ ? '/vue' : '/', mode: 'history', routes, }) instance = new Vue({ router, store, render: h => h(App), }).$mount(container ? container.querySelector('#app') : '#app') } if (window.__POWERED_BY_QIANKUN__) { // eslint-disable-next-line no-undef __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } else { render() } function storeTest(props) { props.onGlobalStateChange && props.onGlobalStateChange( (value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev), true, ) props.setGlobalState && props.setGlobalState({ ignore: props.name, user: { name: props.name, }, }) } export async function bootstrap() { console.log('[vue] vue app bootstraped') } export async function mount(props) { console.log('[vue] props from main framework', props) storeTest(props) render(props) } export async function unmount() { instance.$destroy() instance.$el.innerHTML = '' instance = null router = null }
可以看到在文件的最后暴露出了 三个生命周期函数。另外在挂载子应用时还需要注意一下，子应用是在主应用下运行还是自己独立运行：。bootstrapmountunmountcontainer ? container.querySelector('#app') : '#app'
配置打包项
根据 qiankun 文档提示，需要对子应用的打包配置项作如下更改：
const packageName = require('./package.json').name; module.exports = { output: { library: `${packageName}-[name]`, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${packageName}`, }, };
所以现在我们还需要在子应用目录下创建 文件，输入以下代码：vue.config.js
// vue.config.js const { name } = require('./package.json') module.exports = { configureWebpack: { output: { // 把子应用打包成 umd 库格式 library: `${name}-[name]`, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${name}` } }, devServer: { port: 8001, headers: { 'Access-Control-Allow-Origin': '*' } } }
vue.config.js 文件有几个注意事项：
- 主应用、子应用运行在不同端口下，所以需要设置跨域头 。
'Access-Control-Allow-Origin': '*' - 由于在主应用配置了 vue 子应用需要运行在 8001 端口下，所以也需要在 里更改端口。
devServer
另外一个子应用 react 的改造方法和 vue 是一样的，所以在此不再赘述。
部署
我们将使用 express 来部署项目，除了需要在子应用设置跨域外，没什么需要特别注意的地方。
主应用服务器文件 ：main-server.js
const fs = require('fs') const express = require('express') const app = express() const port = 8000 app.use(express.static('main-static')) app.get('*', (req, res) => { fs.readFile('./main-static/index.html', 'utf-8', (err, html) => { res.send(html) }) }) app.listen(port, () => { console.log(`main app listening at http://localhost:${port}`) })
vue 子应用服务器文件 ：vue-server.js
const fs = require('fs') const express = require('express') const app = express() const cors = require('cors') const port = 8001 // 设置跨域 App.use（cors()) 应用程序使用（快递.static（'vue-static')) app.get（'*'， （req， res） => { 司 司长。readFile（'./vue-static/index.html'， 'utf-8'， （err， html） => { res.send（html） }) }) app.listen（port，() => { 控制台。log（'vue app listen at http://localhost：${port}') })
react 子应用服务器文件 ：react-server.js
const fs = require('fs') const express = require('express') const app = express() const cors = require('cors') const port = 8002 // 设置跨域 app.use(cors()) app.use(express.static('react-static')) app.get('*', (req, res) => { fs.readFile('./react-static/index.html', 'utf-8', (err, html) => { res.send(html) }) }) app.listen(port, () => { console.log(`react app listening at http://localhost:${port}`) })
另外需要将这三个应用打包后的文件分别放到 、、 目录下。然后分别执行命令 、、 即可查看部署后的页面。现在这个项目目录如下：main-staticvue-staticreact-staticnode main-server.jsnode vue-server.jsnode react-server.js
-main -main-static // main 主应用静态文件目录 -react -react-static // react 子应用静态文件目录 -vue -vue-static // vue 子应用静态文件目录 -main-server.js // main 主应用服务器 -vue-server.js // vue 子应用服务器 -react-server.js // react 子应用服务器
我已经将这个微前端应用的代码上传到了 github，建议将项目克隆下来配合本章一起阅读，效果更好。下面放一下 DEMO 的运行效果图：
小结
对于大型应用的开发和维护，使用微前端能让我们变得更加轻松。不过如果是小应用，建议还是单独建一个项目开发。毕竟微前端也有额外的开发、维护成本。
参考资料
带你入门前端工程 全文目录：
- 技术选型：如何进行技术选型？
- 统一规范：如何制订规范并利用工具保证规范被严格执行？
- 前端组件化：什么是模块化、组件化？
- 测试：如何写单元测试和 E2E（端到端） 测试？
- 构建工具：构建工具有哪些？都有哪些功能和优势？
- 自动化部署：如何利用 Jenkins、Github Actions 自动化部署项目？
- 前端监控：讲解前端监控原理及如何利用 sentry 对项目实行监控。
- 性能优化（一）：如何检测网站性能？有哪些实用的性能优化规则？
- 性能优化（二）：如何检测网站性能？有哪些实用的性能优化规则？
- 重构：为什么做重构？重构有哪些手法？
- 微服务：微服务是什么？如何搭建微服务项目？
- Severless：Severless 是什么？如何使用 Severless？
