乾坤子系统配置

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ele-admin-template",
+  "name": "page-wms",
   "version": "1.11.2",
   "private": true,
   "scripts": {
@@ -63,4 +63,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"
@@ -134,6 +136,9 @@
       };
     },
     computed: {
+      isQianKun () {
+        return window.__POWERED_BY_QIANKUN__;
+      },
       // 当前语言
       locale () {
         return this.$i18n.locale;

src/main.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import './public-path';
 import App from './App.vue';
 import store from './store';
 import router from './router';
@@ -10,6 +11,7 @@ import i18n from './i18n';
 import './styles/index.scss';
 import DictSelection from '@/components/Dict/DictSelection';
 import HeaderTitle from '@/components/header-title';
+import initParentStore from '../qiankun_config/store';
 Vue.component('HeaderTitle', HeaderTitle);
 
 // // register globally
@@ -29,9 +31,47 @@ Vue.use(EleAdmin, {
 Vue.use(permission);
 Vue.use(VueClipboard);
 
-new Vue({
-  router,
-  store,
-  i18n,
-  render: (h) => h(App)
-}).$mount('#app');
+let instance = null;
+
+function render (props = {}) {
+  const { container, routerBase } = props;
+  // const router = new VueRouter({
+  //   base: window.__POWERED_BY_QIANKUN__ ? routerBase : process.env.BASE_URL,
+  //   mode: 'history',
+  //   routes
+  // });
+
+  instance = new Vue({
+    router,
+    store,
+    i18n,
+    render: (h) => h(App)
+  }).$mount(container ? container.querySelector('#app') : '#app');
+}
+
+if (!window.__POWERED_BY_QIANKUN__) {
+  // 这里是子应用独立运行的环境，实现子应用的登录逻辑
+  render();
+}
+
+export async function bootstrap () {
+  console.log('[vue] vue app bootstraped');
+}
+
+export async function mount (props) {
+  console.log('[vue] props from main framework', props);
+
+  initParentStore(props.store);
+  props.onGlobalStateChange((state, prev) => {
+    // state: 变更后的状态; prev 变更前的状态
+    initParentStore(state);
+  });
+
+  render(props);
+}
+
+export async function unmount () {
+  instance.$destroy();
+  instance.$el.innerHTML = '';
+  instance = null;
+}

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/router/index.js

@@ -12,9 +12,10 @@ import { routes, getMenuRoutes } from './routes';
 Vue.use(VueRouter);
 
 const router = new VueRouter({
+  base: window.__POWERED_BY_QIANKUN__ ? '/page-wms/' : '/wms/',
   routes,
   mode: 'history',
-  scrollBehavior() {
+  scrollBehavior () {
     return { y: 0 };
   }
 });

src/store/index.js

@@ -23,6 +23,7 @@ export default new Vuex.Store({
   getters,
   plugins: [
     createPersistedState({
+      key: 'vuex-wms',
       storage: window.sessionStorage,
       paths: ['user']
     })

src/store/modules/user.js

@@ -49,26 +49,26 @@ export default {
   },
   mutations: {
     // 设置登录用户的信息
-    setUserInfo(state, info) {
+    setUserInfo (state, info) {
       localStorage.setItem('info', JSON.stringify(info));
       console.log('setUserInfo');
 
       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;
     }
   },
@@ -106,13 +106,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-wms');
+      if (!list.length) {
         return {};
       }
 
-      const { menuList, authorities } = formatRouter(result);
+      const { menuList, authorities } = formatRouter(list[0].children);
 
       // 用户权限
       // const authorities =
@@ -157,19 +158,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: '/wms',
   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();