基座

操作准则

基座应用目前仅负责个子应用间通信，及公用数据储存；登录注册流程在基座应用中进行；子应用跳转切换通过基座进行；基座不含固定侧边栏及顶部栏，以避免不同业务需求下固定栏的不一致，需侧边栏及顶部栏在子应用中自行配置

指令

# 安装基座及所有子应用依赖
yarn bootstrap

# 仅安装基座依赖
yarn

# 启动服务
## 启动基座及所有子应用服务
yarn dev:all

## 仅启动基座服务
yarn serve

新增子应用必须配置项

子应用

步骤 1: 根目录新增 vue.config.js 文件

module.exports = {
  outputDir: "chatTim",
  publicPath: "/child/chatTim/",
  productionSourceMap: false,
  devServer: {
    hot: false,
    // disableHostCheck: true,
    port: 4103,
    open: false,
    // overlay: {
    //   warnings: false,
    //   errors: true,
    // },
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    // proxy: {
    //   '/_AMapService': {
    //     target:'https://restapi.amap.com/',
    //     changeOrigin:true,//允许跨域
    //     pathRewrite: {
    //     '^/_AMapService':'/'
    //     }
    //   }
    // }
  },
  lintOnSave: false,
  // 自定义webpack配置
  configureWebpack: {
    externals: {
      AMap: "AMap",
    },
  },
};

步骤 2: 在子应用 src 目录下创建名称为 public-path.js 的文件，并添加如下内容

/* eslint-disable no-undef */
if (window.__MICRO_APP_ENVIRONMENT__) {
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__;
}

步骤 3: 在子应用入口文件的最顶部引入 public-path.js

import "./public-path";

基座

• 基座 config.js 文件中变量 config 中添加新增子应用的访问端口 示例：

const config = {
  personalEnd: "http://localhost:4101",
  enterprise: "http://localhost:4102",
  chatTim: "http://localhost:4103",
};

• 基座 views 文件夹下添加 vue 文件，页面中根据新增子应用的 vue.config.js 配置所要访问的子应用 示例：

<template>
  <div>
    <micro-app name="enterprise" :url="url"></micro-app>
  </div>
</template>

<script>
// import microApp from '@micro-zoe/micro-app';
import config from "./../config";
export default {
  name: "enterprise-app",
  data() {
    return {
      url: `${config.enterprise}/child/enterprise/`,
    };
  },
};
</script>

• 基座路由新增访问该子应用路径
  注：默认子应用开启虚拟路由，避免路由冲突

路由跳转

基座切换子应用

基座控制子应用切换使用 push 方法，保留页面栈

this.$router.push("切换的子应用在基座中的路由");

子应用切换子应用

各子应用中路由都是独立的，互不干扰的；切换子应用的权限为基座所有，实现该功能即通过子应用通知基座执行切换子应用指令

子应用示例

window.microApp.dispatch({
  type: "router",
  data: "/demo2",
});

基座示例

<template>
  <div>
    <micro-app :name="name" :url="url" @datachange="datachange"></micro-app>
  </div>
</template>

<script>
import config from "./../config";
export default {
  name: "personalEnd-app",
  data() {
    return {
      url: `${config.personalEnd}/child/personalEnd/`,
      name: "personalEnd",
    };
  },
  methods: {
    datachange(e) {
      console.log("来自子应用的数据：", e.detail.data);
      let data = e.detail.data.data;
      this.dataChange[e.detail.data.type](data);
    },
  },
};
</script>

子应用切换页面

子应用内的页面跳转（除需保留页面栈进行返回操作页面外）建议使用 replace 方法，不保留页面栈，避免浏览器返回按钮不断返回相同几个页面的问题

子应用调用基座通用方法

1、在基座子应用插槽页面注入

<template>
  <div>
    <micro-app
      :name="name"
      :url="url"
      @datachange="datachange"
      :data="imData"
    ></micro-app>
  </div>
</template>

<script>

export default {
  data() {
    return {
      imData: {
        dataChange: this.dataChange  //this.dataChange已全局注入
      }
    }
  }
}

</script>

2、在子应用内部调用

  window.microApp?.getData().dataChange['方法名']