基于vue+qiankun微前端项目实战vue项目（新手学习）.zip

# wl-micro-frontends [wl-qiankun] 本项目采用 vue + qiankun 实践微前端落地。 同时 qiankun 是一个开放式微前端架构，支持当前三大前端框架甚至 jq 等其他项目无缝接入。 此项目为了尽可能的简单易上手，以及方便文章讲解，大部分逻辑都在主应用和子应用的 main.js 来回施展， 实际项目应用可不要如此粗暴，要有优雅的架构设计。 另有微前端进阶实战项目：基于 vue3.0-beta 及 qiankun2.0 极速尝鲜！[wl-mfe](wl-ui/wl-mfe) 部署教程：[使用各种姿势舒服的部署微前端项目](https://juejin.cn/post/6921649095610204173/) #### [在线地址](http://mfe.wlui.com.cn/) ## 项目启动 ```bash npm run cinit npm run init 下载依赖，因为是批量下载所有应用下的依赖，推荐cinit节省下载时间 npm run serve 运行项目，同样，批量运行所有应用会耗时较久，浏览器页面自动打开后请稍家等待，然后刷新即可 npm run build 打包项目，打包所有应用 ``` ## 微前端 qiankun 微前端是什么、为什么要做微前端、qiankun 是什么这些笔者将不再叙述。（文末有彩蛋~） 传送门：[可能是你见过最完善的微前端解决方案](https://yq.aliyun.com/articles/715922) & [qiankun](umijs/qiankun) 下面直接进入实战教程。 ### 实战教程目录详解 鉴于 qiankun 文档只有寥寥十几行，这里做一个尽量详细的实战示例描述: - [x] 微前端主应用与子应用如何构建 - [x] 主应用与子应用通信(静态，无法监测到值变化) - [x] 主、子，各应用间动态通信(动态，各应用间实时监听，同步数据) - [x] 主应用资源下发至子应用 - [x] 微前端鉴权方案 - [x] 一：异步注册(主应用异步获取子应用注册表并将子应用对应的路由下发至子应用) - [ ] 二：异步路由(使用应用间通信，通知子应用路由数据，子应用在内部 addRoutes 异步插入路由) - [x] 各应用间路由基础管理 - [x] 公共资源处理 ## 微前端主应用与子应用如何构建 ### 构建主应用 1. 创建一个主项目工程目录 2. npm install qiankun 下载微前端方案依赖 3. 改造主项目： > 在 main.js 中 ```javascript // 导入qiankun内置函数 import { registerMicroApps, // 注册子应用 runAfterFirstMounted, // 第一个子应用装载完毕 setDefaultMountApp, // 设置默认装载子应用 start, // 启动 } from 'qiankun'; let app = null; /** * 渲染函数 * appContent 子应用html * loading 如果主应用设置loading效果，可不要 */ function render({ appContent, loading } = {}) { if (!app) { app = new Vue({ el: '#container', router, store, data() { return { content: appContent, loading, }; }, render(h) { return h(App, { props: { content: this.content, loading: this.loading, }, }); }, }); } else { app.content = appContent; app.loading = loading; } } /** * 路由监听 * @param {*} routerPrefix 前缀 */ function genActiveRule(routerPrefix) { return (location) => location.pathname.startsWith(routerPrefix); } // 调用渲染主应用 render(); // 注册子应用 registerMicroApps( [ { name: 'vue-aaa', entry: '//localhost:7771', render, activeRule: genActiveRule('/aaa'), }, { name: 'vue-bbb', entry: '//localhost:7772', render, activeRule: genActiveRule('/bbb'), }, ], { beforeLoad: [ (app) => { console.log('before load', app); }, ], // 挂载前回调 beforeMount: [ (app) => { console.log('before mount', app); }, ], // 挂载后回调 afterUnmount: [ (app) => { console.log('after unload', app); }, ], // 卸载后回调 } ); // 设置默认子应用,参数与注册子应用时genActiveRule("/aaa")函数内的参数一致 setDefaultMountApp('/aaa'); // 第一个子应用加载完毕回调 runAfterFirstMounted(() => {}); // 启动微服务 start(); ``` 注意, 主应用的 el 绑定 dom 为#container，因此你也需要修改一下 index.hrml 模板中的 id > 在 app.vue 中，增加一个渲染子应用的盒子 ```vue <template> <div id="root" class="main-container"> <div class="main-container-menu"></div> <!-- 子应用盒子 --> <div id="root-view" class="app-view-box" v-html="content"></div> </div> </template> <script> export default { name: 'root-view', props: { loading: Boolean, content: String, }, }; </script> ``` > 在 vue.config.js 中 主应用可以不配置 `vue.config.js` 或者为了方便找到主应用运行端口可以只设置一个 `port` ```javascript module.exports = { devServer: { port: 3333, }, }; ``` 更多的设置： ```javascript const port = 7770; // dev port module.exports = { // publicPath: './', devServer: { // host: '0.0.0.0', hot: true, disableHostCheck: true, port, overlay: { warnings: false, errors: true, }, headers: { 'Access-Control-Allow-Origin': '*', }, }, }; ``` **注意这里**，vue 项目中，主应用设置`publicPath: './'`会造成子应用配置的 `publicPath` 失效进而刷新页面报错的问题。 一说可以在子应用 `vue.config.js` 里直接配置 `publicPath` 解决。 ### 构建子应用 1. 在主应用的同级目录下创建一个子项目 2. 改造子项目 > 在 main.js 中 ```javascript import Vue from "vue"; import VueRouter from "vue-router"; import App from "./App.vue"; import "./public-path"; import routes from "./router"; Vue.config.productionTip = false; // 声明变量管理vue及路由实例 let router = null; let instance = null; // 导出子应用生命周期 挂载前 export async function bootstrap(props) { console.log(props) } // 导出子应用生命周期 挂载前 挂载后 **注意，实例化路由时，判断当运行在qiankun环境时，路由要添加前缀，前缀与主应用注册子应用函数genActiveRule("/aaa")内的参数一致** export async function mount(props) { router = new VueRouter({ base: window.__POWERED_BY_QIANKUN__ ? "/aaa" : "/", mode: "history", routes }); instance = new Vue({ router, store, render: h => h(App) }).$mount("#app"); } // 导出子应用生命周期 挂载前 卸载后 export async function unmount() { instance.$destroy(); instance = null; router = null; } // 单独开发环境 window.__POWERED_BY_QIANKUN__ || mount(); ``` **注意：**重要的事情说两遍-- 实例化路由时，判断当运行在 qiankun 环境时，路由要设置 base 参数，参数值与主应用注册子应用函数 genActiveRule("/aaa")内的参数一致。 **注意：**上面小小的修改了 router.js 导出的内容 & 引入了一个叫`public-path`的文件。 > 在 router.js 中（可不修改，自行处理） ```javascript const routes = [ { path: '/', name: 'home', component: Home, }, { path: '/about', name: 'a-about', component: () => import('../views/About.vue'), }, ]; export default routes; ``` 不再导出 rouer 实例而是导出路由数据 > 在 public-path 文件内（可直接在 vue.config.js 内配置 publicPath） ```javascript if (window.__POWERED_BY_QIANKUN__) { // eslint-disable-next-line no-undef __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } ``` > 在 vue.comfig.js 中 ```javascript const path = require('path'); const { name } = require('./package'); function resolve(dir) { return path.join(__dirname, dir); } const port = 7771; // dev port module.exports = { outputDir: 'dist', assetsDir: 'static', filenameHashing: true, devServer: { // host: '0.0.0.0', hot: true, disableHostCheck: true, port,