微前端拆分

一、基座（polaris-base）修改

1、在polaris-base基座里克隆子项目
2、在 polaris-base/package.jason 添加子项目的 下载 和 启动。

"install:polaris-equipment": "cd polaris-equipment && yarn",
"serve:polaris-equipment": "cd polaris-equipment && yarn serve"

3、在 polaris-base/script/clone-all.sh 添加子项目名称

project_list=("crm" "manage" "main" "fund" "service", "equipment")

二、子项目（polaris-equipment）修改

1、在polaris-equipment/package.jason，引入公共依赖，且修改name

# 修改名字
“name": "sub-equipment",

# 引入依赖后，重新install
"dependencies": {
    "@sd-common/store": "0.0.12",
    "@sd-common/table": "0.0.12",
 }

2、在polaris-equipment/vue.config.js ，增加配置项

// 添加下面3行
const { name } = require('./package.json');
const defaultSettings = require('./src/settings.js');
const title = defaultSettings.title;

chainWebpack: (config) => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
    types.forEach((type) => addStyleResource(config.module.rule('less').oneOf(type)));
    // 添加下面这个
    config.output.library(`${name}-[name]`).libraryTarget('umd').jsonpFunction(`webpackJsonp_${name}`);
}

devServer: {
	// 添加 headers
	headers: {
      'Access-Control-Allow-Origin': '*'
    }
}

configureWebpack: (config) => {
    const plugins = [];
    // 添加这个
    config.name = title;
}

3、修改 polaris-equipment/src/main.ts 文件， 参考polaris-service/src/main.ts 修改。
4、修改 polaris-equipment/src/layout/index.vue 文件，参考 polaris-service/src/layout/index.vue文件

<div :class="{'fixed-header':fixedHeader, hasTagsView:needTagsView}">
  <!-- 添加下面这一行 -->
  <navbar v-if="!isQiankun" />
  <tags-view v-if="needTagsView" ref='tagsView'/>
</div>

classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        isQiankun: this.isQiankun // 添加这行
      };
    },
    // 添加下面的方法
    isQiankun() {
      return window.__POWERED_BY_QIANKUN__;
    }
 }

// 添加下面样式
<style lang="less" scoped>
.isQiankun {
  .fixed-header {
    top: 56px;
  }
}
</style>

5、修改 polaris-equipment/sr/util/http.js 文件

// 删除
/*
import router from '../router';
*/
// 添加
import { getVueInstanceRouter, logout } from '@/globalInstance';
// router.push({ path: '/login' }); 换成下一行的代码
logout();

if (authRoutes) {
		// 添加下面这一行
        const routerInstance = getVueInstanceRouter();
        // 修改下面这一行
        const findCurrentRoute = (arr = authRoutes.data, path = routerInstance.history.current.name, result = null) => {
          const c = (array = arr) => array && array.find((v) => {
            if (v.name === path) result = v;
            if (v.children && v.children.length) c(v.children, path);
          });
          c();
          return result;
        };

6、添加 /src/globalInstance.js 文件

import routerInstance from './main';
import store from '@/store';

// 此文件方法均为判断独立或qiankun子应用所调用方法;

// 获取router实例
export const getVueInstanceRouter = () => {
  const pathname = window.location.pathname;
  const name = pathname.match(/sub\-[a-z]*/) ? pathname.match(/sub\-[a-z]*/)[0] : '';

  return window.__POWERED_BY_QIANKUN__ ? window[`_QIANKUN_GLOBAL_${name}_THIS__`].$router : routerInstance;
};

// 注销方法
export const logout = () => {
  if (window.__POWERED_BY_QIANKUN__) {
    store.dispatch('global/setGlobalState', { logout: true });
  } else {
    getVueInstanceRouter().push({ path: '/login' });
  }
};

7、清除 resetRouter， 参照polaris-service修改

• router/index.js 需要清除，且需要修改文件
• src/store/modules/permission.js 需要清除，且需要修改文件
• src/store/modules/user.js 需要清除，且需要修改文件，因为service没有need_init_msg，push_msg，暂时注释下

8、/src/icons/svg-sprite.config.js 新增配置文件 解决svg在qiankun中展示问题。

import BrowserSprite from 'svg-baker-runtime/src/browser-sprite';
import domready from 'domready';

const sprite = new BrowserSprite();
let container = '#app';
if (window.__POWERED_BY_QIANKUN__) {
  const wrap = document.querySelector('#sub-wrap');
  container = wrap.firstElementChild.shadowRoot;
}
domready(() => sprite.mount(container));

export default sprite; // don't forget to export!

9、修改 src/permission.js文件 参考 polaris-service 里的写法