微前端高級改造 · JeecgBoot 開發文檔

# 微前端高級改造 >[info] Version: 3.1.0 后的版本支持 ant-design-jeecg-vue最新版默認已經集成qiankun，老版本請參考一下步驟進行項目改造，詳細使用說明參考 [qiankun官網](https://qiankun.umijs.org/zh/) [TOC] ## 1.安裝[qiankun](https://qiankun.umijs.org/zh) 在前端項目外層建立qiankun-jeecg 文件夾把ant-design-jeecg-vue拷貝到此文件夾下如下圖 ![](https://img.kancloud.cn/b9/7c/b97c9ff81b3eccd9c98bdc650fa43658_371x403.png) 進入D:\jeecg\qiankun-jeecg\ant-design-jeecg-vue 目錄下執行如下命令 ![](https://img.kancloud.cn/69/13/6913bc4407ae71540139ba6cba27cad6_604x330.png) ``` yarn add qiankun \# 或者 npm i qiankun -S ``` ## 2.在主應用中注冊微應用 * **src目錄下新建qiankun文件夾** * **qiankun目錄下新建apps.js內容如下** ``` /** *微應用apps * @name: 微應用名稱 - 具有唯一性 * @entry: 微應用入口.必選 - 通過該地址加載微應用， * @container: 微應用掛載節點 - 微應用加載完成后將掛載在該節點上 * @activeRule: 微應用觸發的路由規則 - 觸發路由規則后將加載該微應用 */ //子應用列表 const _apps = []; for (const key in process.env) { if (key.includes('VUE_APP_SUB_')) { const name = key.split('VUE_APP_SUB_')[1]; const obj = { name, entry: process.env[key], container: '#content', activeRule: name, }; _apps.push(obj) } } export const apps = _apps; ``` * **qiankun目錄下新建state.js內容如下** ~~~ /** *公共數據 */ import {initGlobalState} from 'qiankun'; import store from '@/store'; import router from '@/router'; import Vue from 'vue'; import {ACCESS_TOKEN} from "@/store/mutation-types" //定義傳入子應用的數據 export function getProps() { return { data: { publicPath: process.env.BASE_URL, token: Vue.ls.get(ACCESS_TOKEN), store, router } } } /** * 定義全局狀態，并返回通信方法,在主應用使用，微應用通過 props 獲取通信方法。 * @param state 主應用穿的公共數據 */ export function initGlState(info = {userName: 'admin'}) { // 初始化state const actions = initGlobalState(info); // 設置新的值 actions.setGlobalState(info); // 注冊觀察者函數 - 響應 globalState 變化，在 globalState 發生改變時觸發該觀察者函數。 actions.onGlobalStateChange((newState, prev) => { // state: 變更后的狀態; prev 變更前的狀態 console.info("newState", newState) for (const key in newState) { console.info("onGlobalStateChange", key) } }); // 將action對象綁到Vue原型上，為了項目中其他地方使用方便 Vue.prototype.$actions = actions; } ~~~ * **qiankun目錄下新建index.js內容如下** ~~~ /** * qiankun配置 */ import {registerMicroApps, setDefaultMountApp, start, runAfterFirstMounted, addGlobalUncaughtErrorHandler} from 'qiankun'; import {apps} from './apps'; import {getProps, initGlState} from './state'; /** * 重構apps */ function filterApps() { apps.forEach((item) => { //主應用需要傳遞給微應用的數據。 item.props = getProps(); //微應用觸發的路由規則 item.activeRule = genActiveRule('/' + item.activeRule); }); return apps; } /** * 路由監聽 * @param {*} routerPrefix 前綴 */ function genActiveRule(routerPrefix) { return location => location.pathname.startsWith(routerPrefix); } /** * 微應用注冊 */ function registerApps() { const _apps = filterApps(); registerMicroApps(_apps, { beforeLoad: [ loadApp => { console.log('before load', loadApp); } ], beforeMount: [ mountApp => { console.log('before mount', mountApp); } ], afterMount: [ mountApp => { console.log('before mount', mountApp); } ], afterUnmount: [ unloadApp => { console.log('after unload', unloadApp); } ] }); // 設置默認子應用,與 genActiveRule中的參數保持一致 // setDefaultMountApp(); // 第一個微應用 mount 后需要調用的方法，比如開啟一些監控或者埋點腳本。 runAfterFirstMounted(() => console.log('開啟監控')); // 添加全局的未捕獲異常處理器。 addGlobalUncaughtErrorHandler(event => console.log(event)); // 定義全局狀態 initGlState(); //啟動qiankun start({}); } export default registerApps; ~~~ * **引入qiankun注冊文件** ant-design-jeecg-vue/src/components/layouts/TabLayout.vue 中加入如下代碼 ![](https://img.kancloud.cn/2b/88/2b88b0a09ae8cbd5e511efd6a5ed7d1d_1431x909.png) ``` <div id="content" class="app-view-box"></div> ``` ~~~ mounted() { if (process.env.VUE_APP_QIANKUN == 'true') { //update-begin-author:zyf date:20211129 for:qiankun 注冊子應用 if (!window.qiankunStarted) { window.qiankunStarted = true; registerApps(); } //update-end-author:zyf date:20211129 for:qiankun 注冊子應用 } }, ~~~ * **添加全局控制開關** ant-design-jeecg-vue/.env 文件中加入qiankun全局控制開關 * **修改打包輸出位置** 修改vue.config.js中outputDir內容定義 ~~~ //將打包內容輸出到qiankun-jeecg文件夾下main目錄下 outputDir: "../dist/main", ~~~ ~~~ # 開啟微應用模式 VUE_APP_QIANKUN=true ~~~ * **添加全局啟動打包文件(package.json)** 存放位置如下圖 ![](https://img.kancloud.cn/5e/87/5e87c4d4208899e1de8703a4ea8b006a_1061x430.png) 文件內容如下 ~~~ { "name": "qiankun-jeecg", "version": "1.0.0", "main": "index.js", "scripts": { "install": "npm-run-all install:* ", "install:main": "cd ant-design-jeecg-vue && npm install", "install:sub01": "cd jeecg-app-1 && npm install ", "start": "npm-run-all start:* ", "start:main": "cd ant-design-jeecg-vue && start cmd /k npm run serve", "start:sub01": "cd jeecg-app-1 && start cmd /k npm run serve", "build": "npm-run-all build:* ", "build:main": "cd ant-design-jeecg-vue && npm run build", "build:sub01": "cd jeecg-app-1 && npm run build" }, "devDependencies": { "npm-run-all": "^4.1.5" } } ~~~ ## 3 子應用改造 * 在子應用src目錄下新建public-path.js文件內容如下 ~~~ //用于修改運行時的 publicPath if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } ~~~ * 修改main.js文件 ~~~ function render(props = {}) { const {container} = props; instance = new Vue({ router, render: (h) => h(App), }).$mount(container ? container.querySelector('#app') : '#app'); } /** * 非qiankun獨立啟動 */ if (!window.__POWERED_BY_QIANKUN__) { render(); } /** * bootstrap 只會在微應用初始化的時候調用一次，下次微應用重新進入時會直接調用 mount 鉤子，不會再重復觸發 bootstrap。 * 通常我們可以在這里做一些全局變量的初始化，比如不會在 unmount 階段被銷毀的應用級別的緩存等。 */ export async function bootstrap(props) { common.setCommonData(props) } /** * 應用每次進入都會調用 mount 方法，通常我們在這里觸發應用的渲染方法 */ export async function mount(props) { common.initGlState(props) render(props); } /** * 應用每次切出/卸載會調用的方法，通常在這里我們會卸載微應用的應用實例 */ export async function unmount() { instance.$destroy(); instance.$el.innerHTML = ''; instance = null; } /** * 可選生命周期鉤子，僅使用 loadMicroApp 方式加載微應用時生效 */ export async function update(props) { common.setCommonData(props) common.initGlState(props) } ~~~ * 打包配置修改（`vue.config.js`） ``` const { name } = require('./package'); module.exports = { devServer: { headers: { // 主應用獲取子應用時跨域響應頭 'Access-Control-Allow-Origin': '*', }, }, configureWebpack: { output: { library: `${name}-[name]`, libraryTarget: 'umd', // 把微應用打包成 umd 庫格式 jsonpFunction: `webpackJsonp_${name}`, }, }, }; ``` * 子應用vue.config.js完整配置參考如下內容 ``` const path = require("path"); const packageName = require("./package.json").name; const node_env = process.env.NODE_ENV === "production"; // const baseUrl = process.env.VUE_APP_BASE_URL; const baseUrl = "/"; const resolve = (dir) => path.join(__dirname, dir); module.exports = { //打包輸入目錄 outputDir: `../dist/${packageName}`, publicPath: node_env ? baseUrl : "/", assetsDir: "static", configureWebpack: { resolve: { alias: { "@": resolve("src"), }, }, output: { library: `${packageName}-[name]`, libraryTarget: "umd", // 把微應用打包成 umd 庫格式 jsonpFunction: `webpackJsonp_${packageName}`, }, }, devServer: { hot: true, disableHostCheck: true, host:'localhost', port: 8092, headers: { "Access-Control-Allow-Origin": "*", // 主應用獲取子應用時跨域響應頭 }, }, }; ```