vue3-admin-jeecg默認已經集成qiankun,詳細使用說明參考 [qiankun官網](https://qiankun.umijs.org/zh/),集成步驟如下
[TOC]
## 1.安裝[qiankun](https://qiankun.umijs.org/zh)
在前端項目外層建立qiankun-jeecg 文件夾 把vue3-admin-jeecg拷貝到此文件夾下如下圖

進入qiankun-jeecg\vue3-admin-jeecg 目錄下執行如下命令

```
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 { getToken } from '/@/utils/auth';
//定義傳入子應用的數據
export function getProps() {
return {
data: {
publicPath:'/',
token: getToken(),
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)
console.info("prev", prev)
for (const key in newState) {
console.info("onGlobalStateChange", key)
}
});
}
~~~
* **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注冊文件**
vue3-admin-jeecg/src/layouts/default/content/index.vue中加入如下代碼
```
<div id="content" class="app-view-box" v-if="openQianKun=='true'"></div>
```
~~~
onMounted(() => {
//注冊openQianKun
if (openQianKun=='true') {
if (!window.qiankunStarted) {
window.qiankunStarted = true;
registerApps();
}
}
});
~~~
* **添加全局控制開關**
vue3-admin-jeecg/.env 文件中加入qiankun全局控制開關
```
VITE_GLOB_APP_OPEN_QIANKUN=true
```
* **修改打包輸出位置**
修改vue3-admin-jeecg/build/constant.ts中outputDir內容定義,將打包內容輸出到qiankun-vue3-jeecg文件夾下main目錄下
```
export const OUTPUT_DIR = '../dist/main';
```
* **添加全局啟動打包文件(package.json)** 存放位置如下圖

文件內容如下
~~~
{
"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": "*", // 主應用獲取子應用時跨域響應頭
},
},
};
```
- 項目介紹
- 常見問題
- 開發環境準備
- 環境準備
- 啟動項目
- 切換Vue3路由
- 項目配置詳細說明
- 上線部署
- 快速構建&部署
- Docker鏡像啟動
- 項目配置
- 菜單配置
- 菜單緩存
- 積木報表菜單配置
- 首頁配置
- 國際化
- 菜單國際化
- 組件注冊
- 項目規范
- 跨域處理
- 樣式庫
- 圖標生成
- package依賴介紹
- 菜單TAB風格
- 備份文檔
- 詳細構建和配置
- 構建部署1.0
- 切換Mock接口
- 原生路由(作廢)
- 原生菜單(作廢)
- 頁面開啟緩存(作廢)
- 環境準備1.0
- 數據 mock&聯調
- UI組件
- Form 表單組件
- Table 表格
- Modal 彈窗
- Drawer 抽屜組件
- Icon 圖標組件
- Button 按鈕
- 更多基礎組件
- JSelectUser選擇用戶 ?
- JSelectPosition崗位選擇 ?
- JSelectDept部門選擇 ?
- JCheckbox ?
- JImportModal 列表導入彈窗組件
- JInput特殊查詢組件 ?
- JPopup彈窗選擇組件 ?
- JTreeSelect樹形下拉框 (異步加載) ?
- JAreaSelect 省市縣級聯組件
- JDictSelectTag 字典標簽 ?
- JEllipsis 超長截取顯示組件 ?
- JUpload 上傳組件 ?
- JEasyCron 定時表達式選擇組件 ?
- JInputPopup 多行輸入窗口組件 ?
- JSwitch 開關選擇組件 ?
- JTreeDict 分類字典樹形下拉組件 ?
- JSelectInput 可輸入下拉框 ?
- JEditor 富文本編輯器 ?
- JMarkdownEditor Markdown編輯器 ?
- JSearchSelect 字典表的搜索組件 ?
- JSelectUserByDept 根據部門選擇用戶 ?
- JVxeTable
- 組件配置文檔
- 自定義組件
- 封裝自定義組件
- 自定義組件增強
- 多級聯動配置
- 使用示例
- 常見問題解答
- JAreaLinkage 省市縣聯動組件 ?
- JCategorySelect 分類字典樹 ?
- JImageUpload 圖片上傳 ?
- JSelectMultiple 下拉多選 ?
- JSelectRole 選擇角色 ?
- JFormContainer 表單組件禁用 ?
- SuperQuery 高級查詢
- UserSelect 高級用戶選擇組件
- Basic
- Page
- Authority
- PopConfirmButton
- CollapseContainer
- ScrollContainer
- LazyContainer
- CodeEditor
- JsonPreview
- CountDown
- ClickOutSide
- CountTo
- Cropper
- Description
- FlowChart
- Upload
- Tree
- Excel
- Qrcode
- Markdown
- Loading
- Tinymce
- Time
- StrengthMeter
- Verify
- Transition
- VirtualScroll
- ContextMenu
- Preview
- Loading
- 前端權限
- 表單權限
- 顯隱控制 ?
- 禁用控制 ?
- 列表權限
- 按鈕權限控制
- 列字段顯隱控制
- 行編輯組件權限
- 顯隱控制
- 禁用控制
- 代碼生成
- Online在線代碼生成
- GUI代碼生成
- 代碼生成模板介紹
- vue3和vue3Native詳細說明
- 深入開發
- 定義Form新組件
- 自定義列表查詢
- 自定義表單布局
- 開發筆記
- 組件權限控制
- 使用Antd Vue原生Form
- 自定義圖表組件
- 自定義渲染函數
- 如何編寫mock接口
- 緩存用法
- 精簡版代碼制作
- 微前端(qiankun)集成
- 前端小技巧
- 表單整體禁用
- 彈框內下拉框錯位
- 界面如何設置響應式
- 抽屜(Drawer)寬度自適應
- 生成菜單腳本
- Online表單
- Online常見問題
- Online表單配置
- 配置參數說明
- 系統標準字段
- 表單類型-主子表|樹表
- 自定義查詢配置
- Online表單風格
- Online表單刪除說明
- Online聯合查詢配置
- online表單視圖功能說明
- Online表單開啟評論
- Online表單控件介紹
- 常用基礎控件
- 高級關聯記錄
- Online表單控件配置
- 基本配置
- 控件擴展配置
- 默認值表達式
- 自定義查詢配置
- 字段href
- 默認值(填值規則)
- 導入導出自定義規則
- Online表單權限配置
- 字段權限配置與授權
- 按鈕權限配置與授權
- 數據權限配置與授權
- 聯合查詢數據權限規則說明
- 在線增強
- 自定義按鈕
- SQL增強
- JS增強
- 按鈕觸發JS增強
- 列表Api
- 列表操作列前置事件
- 表單Api
- beforeSubmit事件
- loaded事件
- 表單值改變事件【單表/主表】
- 表單值改變事件【從表】
- 表單值改變事件【從改主】
- 控制字段顯示與隱藏
- js增強實現下拉聯動
- js增強控制下拉樹數據
- JS增強 觸發彈窗
- JS增強 http請求
- JS增強 方法定義
- 對接表單設計器后需注意
- JAVA增強
- 快速開始
- Online java增強 導入
- Online java增強 導出
- Online java增強 查詢
- Online Java增強 http-api
- 表單類
- 列表類
- 其他功能示例
- 導入數據庫表支持排除表
- 通過字段Href實現三級聯動
- excel數據導入支持校驗
- Online報表
- Online報表配置
- 配置成菜單
- 其他功能
- 推送消息
- ISO 8601書寫格式
- 系統消息跳轉至詳情表單
- 菜單【批量申請(自定義)】功能說明
- Online自動化測試
- online AI自動化測試數據制作
- Online AI自動化測試數據制作
- Online AI模型測試用例功能詳情
- JAVA后臺功能
- saas多租戶切換
- 新功能實現saas租戶隔離
- 第三方集成
- 敲敲云集成釘釘