乾坤子应用配置

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ele-admin-template",
+  "name": "page-eam",
   "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/main.js

@@ -9,6 +9,7 @@ import VueClipboard from 'vue-clipboard2';
 import i18n from './i18n';
 import './styles/index.scss';
 import DictSelection from '@/components/Dict/DictSelection';
+import initParentStore from '../qiankun_config/store';
 
 import HeaderTitle from '@/components/header-title';
 Vue.component('HeaderTitle', HeaderTitle);
@@ -29,9 +30,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-eam/' : '/eam/',
   routes,
   mode: 'history',
-  scrollBehavior() {
+  scrollBehavior () {
     return { y: 0 };
   }
 });

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: '/eam',
   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();