乾坤子应用配置

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ele-admin-template",
+  "name": "page-mes",
   "version": "1.11.2",
   "private": true,
   "scripts": {
@@ -62,4 +62,4 @@
     "vue-template-compiler": "^2.7.10",
     "webpack": "^5.74.0"
   }
-}
+}

qiankun_config/store.js

@@ -0,0 +1,21 @@
+import store from '../src/store';
+
+export default function (state) {
+  if (!state) {
+    return;
+  }
+  // 主题
+  if (state.theme) {
+    for (const key in state.theme) {
+      store.commit('theme/SET', { key, value: state.theme[key] });
+    }
+
+    store.dispatch('theme/setColor', state.theme.color);
+    store.dispatch('theme/setWeakMode', state.theme.weakMode);
+    store.dispatch('theme/setStyleResponsive', state.theme.styleResponsive);
+  }
+  //   用户信息
+  if (state.user?.info) {
+    store.commit('user/setUserInfo', state.user.info);
+  }
+}

src/layout/index.vue

@@ -1,5 +1,7 @@
 <template>
+  <router-layout v-if="isQianKun" />
   <ele-pro-layout
+    v-else
     :menus="menus"
     :tabs="theme.tabs"
     :collapse="theme.collapse"
@@ -119,7 +121,7 @@
       HeaderTools
       // PageFooter
     },
-    data() {
+    data () {
       return {
         PROJECT_NAME,
         HIDE_SIDEBARS,
@@ -134,12 +136,15 @@
       };
     },
     computed: {
+      isQianKun () {
+        return window.__POWERED_BY_QIANKUN__;
+      },
       // 当前语言
-      locale() {
+      locale () {
         return this.$i18n.locale;
       },
       // 菜单数据
-      menus() {
+      menus () {
         return this.$store.state.user.menus;
       },
       // 主题状态
@@ -147,29 +152,29 @@
     },
     methods: {
       /* 侧栏折叠切换 */
-      updateCollapse(value) {
+      updateCollapse (value) {
         // console.log('value:', this.$store.state.user.menus);
         this.$store.dispatch('theme/setCollapse', value);
       },
       /* 双侧栏一级折叠切换 */
-      updateSideNavCollapse(value) {
+      updateSideNavCollapse (value) {
         this.$store.dispatch('theme/setSideNavCollapse', value);
       },
       /* 内容区域全屏切换 */
-      updateBodyFullscreen(value) {
+      updateBodyFullscreen (value) {
         this.$store.dispatch('theme/setBodyFullscreen', value);
       },
       /* logo 点击事件 */
-      onLogoClick(isHome) {
+      onLogoClick (isHome) {
         isHome || this.$router.push(LAYOUT_PATH);
       },
       /* 监听屏幕尺寸改变 */
-      screenSizeChange() {
+      screenSizeChange () {
         this.$store.dispatch('theme/updateScreenSize');
         this.fullscreen = isFullscreen();
       },
       /* 全屏切换 */
-      onFullscreen() {
+      onFullscreen () {
         try {
           this.fullscreen = toggleFullscreen();
         } catch (e) {
@@ -177,7 +182,7 @@
         }
       },
       /* 页签右键菜单点击事件 */
-      onTabContextMenu({ key, tabKey, item, active }) {
+      onTabContextMenu ({ key, tabKey, item, active }) {
         switch (key) {
           case 'reload': // 刷新
             reloadPageTab({
@@ -212,7 +217,7 @@
         }
       },
       /* 菜单标题国际化 */
-      i18n(_path, key) {
+      i18n (_path, key) {
         if (!I18N_ENABLE || !key) {
           return;
         }

src/public-path.js

@@ -0,0 +1,13 @@
+(function () {
+  if (window.__POWERED_BY_QIANKUN__) {
+    if (process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line
+      __webpack_public_path__ = `//localhost:${process.env.VUE_APP_PORT}/`;
+      console.log('__webpack_public_path__', __webpack_public_path__);
+      return;
+    }
+    // eslint-disable-next-line
+    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
+    // __webpack_public_path__ = `${process.env.BASE_URL}/`
+  }
+})();

src/store/modules/user.js

@@ -49,23 +49,23 @@ export default {
   },
   mutations: {
     // 设置登录用户的信息
-    setUserInfo(state, info) {
+    setUserInfo (state, info) {
       state.info = info;
     },
     // 设置登录用户的菜单
-    setMenus(state, menus) {
+    setMenus (state, menus) {
       state.menus = menus;
     },
     // 设置登录用户的权限
-    setAuthorities(state, authorities) {
+    setAuthorities (state, authorities) {
       state.authorities = authorities;
     },
     // 设置登录用户的权限路由
-    setAuthoritiesRouter(state, authoritiesRouter) {
+    setAuthoritiesRouter (state, authoritiesRouter) {
       state.authoritiesRouter = authoritiesRouter;
     },
     // 设置登录用户的角色
-    setRoles(state, roles) {
+    setRoles (state, roles) {
       state.roles = roles;
     }
   },
@@ -103,13 +103,14 @@ export default {
     //   return { menus, homePath };
     // },
     //动态路由
-    async fetchUserInfo({ commit }) {
+    async fetchUserInfo ({ commit }) {
       const result = await getResourcesTree().catch(() => {});
-      if (!result) {
+      const list = result.filter((i) => i.path === '/page-mes');
+      if (!list.length) {
         return {};
       }
 
-      const { menuList, authorities } = formatRouter(result);
+      const { menuList, authorities } = formatRouter(list[0].children);
 
       // 用户权限
       // const authorities =
@@ -154,19 +155,19 @@ export default {
     /**
      * 更新用户信息
      */
-    setInfo({ commit }, value) {
+    setInfo ({ commit }, value) {
       commit('setUserInfo', value);
     },
     /**
      * 更新菜单数据
      */
-    setMenus({ commit }, value) {
+    setMenus ({ commit }, value) {
       commit('setMenus', value);
     },
     /**
      * 更新菜单的badge
      */
-    setMenuBadge({ commit, state }, { path, value, color }) {
+    setMenuBadge ({ commit, state }, { path, value, color }) {
       const menus = formatTreeData(state.menus, (m) => {
         if (path === m.path) {
           return {

vue.config.js

@@ -1,18 +1,29 @@
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
 const { transformElementScss } = require('ele-admin/lib/utils/dynamic-theme');
 const path = require('path');
+const { name } = require('./package.json');
 
-function resolve(dir) {
+function resolve (dir) {
   return path.join(__dirname, dir);
 }
 
 module.exports = {
+  publicPath: '/mes',
   lintOnSave: false,
   productionSourceMap: false,
   configureWebpack: {
     performance: {
       maxAssetSize: 2000000,
       maxEntrypointSize: 2000000
+    },
+    output: {
+      // 把子应用打包成 umd 库格式
+      library: {
+        type: 'umd',
+        name: `${name}`
+      },
+
+      chunkLoadingGlobal: `webpackJsonp_${name}`
     }
   },
   devServer: {
@@ -34,7 +45,7 @@ module.exports = {
       }
     }
   },
-  chainWebpack(config) {
+  chainWebpack (config) {
     config.plugins.delete('prefetch');
     // set svg-sprite-loader
     // config.module.rule('svg').exclude.add(resolve('./src/icons')).end();