乾坤 子应用修改

.env.development

@@ -1,2 +1,4 @@
 VUE_APP_API_BASE_URL=/api
-#VUE_APP_API_BASE_URL=http://localhost:8081/api
+#VUE_APP_API_BASE_URL=http://localhost:8080/api
+
+VUE_APP_PORT=8080

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ele-admin-template",
+  "name": "main-data",
   "version": "1.11.2",
   "private": true,
   "scripts": {
@@ -68,4 +68,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/App.vue

@@ -9,13 +9,13 @@
 
   export default {
     name: 'App',
-    created() {
+    created () {
       // 恢复主题
       this.$store.dispatch('theme/recoverTheme');
     },
     methods: {
       /* 路由切换更新浏览器标题 */
-      setDocumentTitle() {
+      setDocumentTitle () {
         updateDocumentTitle(
           this.$route,
           (key) => this.$t(key),
@@ -24,10 +24,10 @@
       }
     },
     watch: {
-      '$i18n.locale'() {
+      '$i18n.locale' () {
         this.setDocumentTitle();
       },
-      $route() {
+      $route () {
         this.setDocumentTitle();
       }
     }

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,6 @@
 import Vue from 'vue';
+import './public-path';
+import initParentStore from '../qiankun_config/store';
 import App from './App.vue';
 import store from './store';
 import router from './router';
@@ -13,7 +15,7 @@ import DictSelection from '@/components/Dict/DictSelection';
 // import tinymce from '@/components/FormGenerator/components/tinymce/index.js';
 import TinymceEditor from '@/components/TinymceEditor/index.vue';
 // import SvgIcon from '@/components/FormGenerator/components/SvgIcon'; // svg component
-
+// import registerGlobalModule from './global-register';
 // // register globally
 Vue.component('tinymce', TinymceEditor);
 import '@/icons';
@@ -31,10 +33,54 @@ 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);
+}
 
-new Vue({
-  router,
-  store,
-  i18n,
-  render: (h) => h(App)
-}).$mount('#app');
+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,13 +12,13 @@ import { routes, getMenuRoutes } from './routes';
 Vue.use(VueRouter);
 
 const router = new VueRouter({
+  base: window.__POWERED_BY_QIANKUN__ ? '/main-data' : process.env.BASE_URL,
   routes,
   mode: 'history',
   scrollBehavior () {
     return { y: 0 };
   }
 });
-
 /**
  * 路由守卫
  */

src/store/modules/theme.js

@@ -86,7 +86,7 @@ let disableTransitionTimer, updateContentSizeTimer;
 /**
  * 读取缓存配置
  */
-function getCacheSetting() {
+function getCacheSetting () {
   try {
     const value = localStorage.getItem(THEME_STORE_NAME);
     if (value) {
@@ -104,7 +104,7 @@ function getCacheSetting() {
 /**
  * 缓存配置
  */
-function cacheSetting(key, value) {
+function cacheSetting (key, value) {
   const cache = getCacheSetting();
   if (cache[key] !== value) {
     cache[key] = value;
@@ -115,7 +115,7 @@ function cacheSetting(key, value) {
 /**
  * 开关响应式布局
  */
-function changeStyleResponsive(styleResponsive) {
+function changeStyleResponsive (styleResponsive) {
   if (styleResponsive) {
     document.body.classList.remove(BODY_LIMIT_CLASS);
   } else {
@@ -126,7 +126,7 @@ function changeStyleResponsive(styleResponsive) {
 /**
  * 切换色弱模式
  */
-function changeWeakMode(weakMode) {
+function changeWeakMode (weakMode) {
   if (weakMode) {
     document.body.classList.add(WEAK_CLASS);
   } else {
@@ -137,7 +137,7 @@ function changeWeakMode(weakMode) {
 /**
  * 切换主题
  */
-function changeTheme(value, dark) {
+function changeTheme (value, dark) {
   return new Promise((resolve, reject) => {
     try {
       changeColor(value, dark);
@@ -151,7 +151,7 @@ function changeTheme(value, dark) {
 /**
  * 切换布局时禁用过渡动画
  */
-function disableTransition() {
+function disableTransition () {
   disableTransitionTimer && clearTimeout(disableTransitionTimer);
   document.body.classList.add(DISABLES_CLASS);
   disableTransitionTimer = setTimeout(() => {
@@ -173,7 +173,7 @@ export default {
   })(),
   getters: {
     // 需要 keep-alive 的组件
-    keepAliveInclude(state) {
+    keepAliveInclude (state) {
       if (!TAB_KEEP_ALIVE || !state.showTabs) {
         return [];
       }
@@ -202,100 +202,100 @@ export default {
     }
   },
   mutations: {
-    SET(state, { key, value }) {
+    SET (state, { key, value }) {
       state[key] = value;
     }
   },
   actions: {
-    setTabs({ commit }, value) {
+    setTabs ({ commit }, value) {
       commit('SET', { key: 'tabs', value });
       //cacheSetting('tabs', value);
     },
-    setCollapse({ commit, dispatch }, value) {
+    setCollapse ({ commit, dispatch }, value) {
       commit('SET', { key: 'collapse', value });
       dispatch('delayUpdateContentSize', 800);
     },
-    setSideNavCollapse({ commit, dispatch }, value) {
+    setSideNavCollapse ({ commit, dispatch }, value) {
       commit('SET', { key: 'sideNavCollapse', value });
       dispatch('delayUpdateContentSize', 800);
     },
-    setBodyFullscreen({ commit, dispatch }, value) {
+    setBodyFullscreen ({ commit, dispatch }, value) {
       disableTransition();
       commit('SET', { key: 'bodyFullscreen', value });
       dispatch('delayUpdateContentSize', 800);
     },
-    setShowTabs({ commit, dispatch }, value) {
+    setShowTabs ({ commit, dispatch }, value) {
       commit('SET', { key: 'showTabs', value });
       cacheSetting('showTabs', value);
       dispatch('delayUpdateContentSize');
     },
-    setShowFooter({ commit, dispatch }, value) {
+    setShowFooter ({ commit, dispatch }, value) {
       commit('SET', { key: 'showFooter', value });
       cacheSetting('showFooter', value);
       dispatch('delayUpdateContentSize');
     },
-    setHeadStyle({ commit }, value) {
+    setHeadStyle ({ commit }, value) {
       commit('SET', { key: 'headStyle', value });
       cacheSetting('headStyle', value);
     },
-    setSideStyle({ commit }, value) {
+    setSideStyle ({ commit }, value) {
       commit('SET', { key: 'sideStyle', value });
       cacheSetting('sideStyle', value);
     },
-    setLayoutStyle({ commit, dispatch }, value) {
+    setLayoutStyle ({ commit, dispatch }, value) {
       disableTransition();
       commit('SET', { key: 'layoutStyle', value });
       cacheSetting('layoutStyle', value);
       dispatch('delayUpdateContentSize');
     },
-    setSideMenuStyle({ commit, dispatch }, value) {
+    setSideMenuStyle ({ commit, dispatch }, value) {
       disableTransition();
       commit('SET', { key: 'sideMenuStyle', value });
       cacheSetting('sideMenuStyle', value);
       dispatch('delayUpdateContentSize');
     },
-    setTabStyle({ commit }, value) {
+    setTabStyle ({ commit }, value) {
       commit('SET', { key: 'tabStyle', value });
       cacheSetting('tabStyle', value);
     },
-    setTransitionName({ commit }, value) {
+    setTransitionName ({ commit }, value) {
       commit('SET', { key: 'transitionName', value });
       cacheSetting('transitionName', value);
     },
-    setFixedHeader({ commit }, value) {
+    setFixedHeader ({ commit }, value) {
       disableTransition();
       commit('SET', { key: 'fixedHeader', value });
       cacheSetting('fixedHeader', value);
     },
-    setFixedSidebar({ commit }, value) {
+    setFixedSidebar ({ commit }, value) {
       disableTransition();
       commit('SET', { key: 'fixedSidebar', value });
       cacheSetting('fixedSidebar', value);
     },
-    setFixedBody({ commit }, value) {
+    setFixedBody ({ commit }, value) {
       disableTransition();
       commit('SET', { key: 'fixedBody', value });
       cacheSetting('fixedBody', value);
     },
-    setBodyFull({ commit, dispatch }, value) {
+    setBodyFull ({ commit, dispatch }, value) {
       commit('SET', { key: 'bodyFull', value });
       cacheSetting('bodyFull', value);
       dispatch('delayUpdateContentSize');
     },
-    setLogoAutoSize({ commit }, value) {
+    setLogoAutoSize ({ commit }, value) {
       disableTransition();
       commit('SET', { key: 'logoAutoSize', value });
       cacheSetting('logoAutoSize', value);
     },
-    setColorfulIcon({ commit }, value) {
+    setColorfulIcon ({ commit }, value) {
       commit('SET', { key: 'colorfulIcon', value });
       cacheSetting('colorfulIcon', value);
     },
-    setSideUniqueOpen({ commit }, value) {
+    setSideUniqueOpen ({ commit }, value) {
       commit('SET', { key: 'sideUniqueOpen', value });
       cacheSetting('sideUniqueOpen', value);
     },
-    setStyleResponsive({ commit }, value) {
+    setStyleResponsive ({ commit }, value) {
       changeStyleResponsive(value);
       commit('SET', { key: 'styleResponsive', value });
       cacheSetting('styleResponsive', value);
@@ -304,7 +304,7 @@ export default {
      * 切换色弱模式
      * @param value 是否是色弱模式
      */
-    setWeakMode({ commit }, value) {
+    setWeakMode ({ commit }, value) {
       return new Promise((resolve) => {
         changeWeakMode(value);
         commit('SET', { key: 'weakMode', value });
@@ -316,7 +316,7 @@ export default {
      * 切换暗黑模式
      * @param value 是否是暗黑模式
      */
-    setDarkMode({ commit, state }, value) {
+    setDarkMode ({ commit, state }, value) {
       return new Promise((resolve, reject) => {
         changeTheme(state.color, value)
           .then(() => {
@@ -333,7 +333,7 @@ export default {
      * 切换主题色
      * @param value 主题色
      */
-    setColor({ commit, state }, value) {
+    setColor ({ commit, state }, value) {
       return new Promise((resolve, reject) => {
         changeTheme(value, state.darkMode)
           .then(() => {
@@ -350,20 +350,20 @@ export default {
      * 设置主页路由对应的组件名称
      * @param components 组件名称
      */
-    setHomeComponents({ commit }, value) {
+    setHomeComponents ({ commit }, value) {
       commit('SET', { key: 'homeComponents', value });
     },
     /**
      * 设置刷新路由信息
      * @param option 路由刷新参数
      */
-    setRouteReload({ commit }, value) {
+    setRouteReload ({ commit }, value) {
       commit('SET', { key: 'routeReload', value });
     },
     /**
      * 更新屏幕尺寸
      */
-    updateScreenSize({ commit, dispatch }) {
+    updateScreenSize ({ commit, dispatch }) {
       commit('SET', { key: 'screenWidth', value: screenWidth() });
       commit('SET', { key: 'screenHeight', value: screenHeight() });
       dispatch('updateContentSize');
@@ -371,7 +371,7 @@ export default {
     /**
      * 更新内容区域尺寸
      */
-    updateContentSize({ commit }) {
+    updateContentSize ({ commit }) {
       commit('SET', { key: 'contentWidth', value: contentWidth() });
       commit('SET', { key: 'contentHeight', value: contentHeight() });
     },
@@ -379,7 +379,7 @@ export default {
      * 延时更新内容区域尺寸
      * @param delay 延迟时间
      */
-    delayUpdateContentSize({ dispatch }, delay) {
+    delayUpdateContentSize ({ dispatch }, delay) {
       updateContentSizeTimer && clearTimeout(updateContentSizeTimer);
       updateContentSizeTimer = setTimeout(() => {
         dispatch('updateContentSize');
@@ -388,7 +388,7 @@ export default {
     /**
      * 重置设置
      */
-    resetSetting({ commit, state }) {
+    resetSetting ({ commit, state }) {
       return new Promise((resolve, reject) => {
         disableTransition();
         [
@@ -431,7 +431,7 @@ export default {
     /**
      * 恢复主题
      */
-    recoverTheme({ state }) {
+    recoverTheme ({ state }) {
       // 关闭响应式布局
       if (!state.styleResponsive) {
         changeStyleResponsive(false);
@@ -451,7 +451,7 @@ export default {
      * 添加页签或更新相同 key 的页签数据
      * @param data 页签数据
      */
-    tabAdd({ dispatch, state }, data) {
+    tabAdd ({ dispatch, state }, data) {
       if (Array.isArray(data)) {
         data.forEach((d) => {
           dispatch('tabAdd', d);
@@ -475,7 +475,7 @@ export default {
      * 关闭页签
      * @param key 页签 key
      */
-    async tabRemove({ dispatch, state }, { key, active }) {
+    async tabRemove ({ dispatch, state }, { key, active }) {
       const i = state.tabs.findIndex(
         (t) => t.key === key || t.fullPath === key
       );
@@ -496,7 +496,7 @@ export default {
     /**
      * 关闭左侧页签
      */
-    async tabRemoveLeft({ dispatch, state }, { key, active }) {
+    async tabRemoveLeft ({ dispatch, state }, { key, active }) {
       let index = -1; // 选中页签的 index
       for (let i = 0; i < state.tabs.length; i++) {
         if (state.tabs[i].key === active) {
@@ -520,7 +520,7 @@ export default {
     /**
      * 关闭右侧页签
      */
-    async tabRemoveRight({ dispatch, state }, { key, active }) {
+    async tabRemoveRight ({ dispatch, state }, { key, active }) {
       if (state.tabs.length) {
         let index = -1; // 选中页签的 index
         for (let i = 0; i < state.tabs.length; i++) {
@@ -557,7 +557,7 @@ export default {
     /**
      * 关闭其它页签
      */
-    async tabRemoveOther({ dispatch, state }, { key, active }) {
+    async tabRemoveOther ({ dispatch, state }, { key, active }) {
       let index = -1; // 选中页签的 index
       let path; // 关闭后跳转的 path
       const temp = state.tabs.filter((d, i) => {
@@ -582,7 +582,7 @@ export default {
      * 关闭全部页签
      * @param active 选中页签的 key
      */
-    async tabRemoveAll({ dispatch, state }, active) {
+    async tabRemoveAll ({ dispatch, state }, active) {
       const t = state.tabs.find((d) => d.key === active);
       const home = typeof t !== 'undefined' && t.closable === true; // 是否跳转主页
       const temp = state.tabs.filter((d) => !d.closable);
@@ -596,7 +596,7 @@ export default {
      * 修改页签
      * @param data 页签数据
      */
-    tabSetItem({ dispatch, state }, data) {
+    tabSetItem ({ dispatch, state }, data) {
       let i = -1;
       if (data.key) {
         i = state.tabs.findIndex((d) => d.key === data.key);

src/store/modules/user.js

@@ -105,11 +105,12 @@ export default {
     //动态路由
     async fetchUserInfo ({ commit }) {
       const result = await getResourcesTree().catch(() => {});
-      if (!result) {
+      const list = result.filter((i) => i.path === '/main-data');
+      if (!list.length) {
         return {};
       }
 
-      const { menuList, authorities } = formatRouter(result);
+      const { menuList, authorities } = formatRouter(list[0].children);
 
       // 用户权限
       // const authorities =

vue.config.js

@@ -1,8 +1,9 @@
 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);
 }
 
@@ -13,6 +14,15 @@ module.exports = {
     performance: {
       maxAssetSize: 2000000,
       maxEntrypointSize: 2000000
+    },
+    output: {
+      // 把子应用打包成 umd 库格式
+      library: {
+        type: 'umd',
+        name: `${name}`
+      },
+
+      chunkLoadingGlobal: `webpackJsonp_${name}`
     }
   },
   devServer: {
@@ -22,19 +32,22 @@ module.exports = {
       '/api': {
         // target: 'http://192.168.3.51:86', // 测试
 
-        target: 'http://192.168.3.35:8080', // kang杨威
+        // target: 'http://192.168.3.35:8080', // kang杨威
         // target: 'http://192.168.3.25:8080', // 黄峥嵘
         // target: 'http://192.168.3.41:8080', // 何江鹏
-        // target: 'http://192.168.3.33:8080', // 谢一平
+        target: 'http://192.168.3.33:8080', // 谢一平
 
         changeOrigin: true, // 只有这个值为true的情况下 才表示开启跨域
         pathRewrite: {
           '^/api': ''
         }
       }
+    },
+    headers: {
+      'Access-Control-Allow-Origin': '*'
     }
   },
-  chainWebpack(config) {
+  chainWebpack (config) {
     config.plugins.delete('prefetch');
     // set svg-sprite-loader
     // config.module.rule('svg').exclude.add(resolve('./src/icons')).end();