当前使用的框架 主应用为vue2.0，子应用为vue2.0

项目使用乾坤框架 目录结构如下

project/
node_modules 主应用和子应用公用node
projects/
vue-child-ppm/ 子应用
vue-main/ 主应用 -- 乾坤框架 包含公共区域的菜单、待办、已办、系统管理
package.json

添加子应用步骤

1、在主应用的main.js中的registerMicroApps方法中添加如下配置

{
  name: 'operation',//应用名称
  entry: process.env.VUE_APP_PPM_ENTERY,//子应用运行时的服务地址端口 本地运行如htpp://localhost:8000 线上运行地址如http://192.168.2.197/opt/
  container: '#operation', //当前为子应用创建的ip  需要在页面上定义一个容器<div id="container">
  activeRule:getActiveRule('#/operation'), //子应用的路由 hash模式下 即拦截浏览器访问地址栏里面子应用的统一地址前缀
  props: {}//主应用打开子应用时传递数据到子应用中 如 id:123
}

2、在主应用中添加子应用的容器，当前是在vue-main/src/layout/index.vue,示例如下

<div  class="main-container">
    <custom-side />
    <app-main v-if="isMicro ==='app'"/>
    <!-- 此为添加的子应用容器 -->
    <div id="operation" v-if="isMicro==='operation'" style="width: 100%;height: 100%"></div>
</div>

3、在主应用中根据路由地址判断子应用的容器显示或者隐藏，当前是在project/vue-main/src/layout/index.vue,示例如下

1、在mounted中添加判断
mounted() {
  if(this.$route.path.indexOf('/operation')>-1){
    this.isMicro = 'operation'
  }else {
    this.isMicro = 'app'
  }
},
2、在watch中添加判断
watch: {
    $route(route) {
      if(route.path.indexOf('/operation')>-1){
        this.isMicro = 'operation'
      }else {
        this.isMicro = 'app'
      }
    }
}

4、由于当前接入isc，在不改动isc中的菜单配置的前提下，之前配置的路由是需要进行特殊处理的，在project/vue-main/src/store/modules/permission.js，示例如下

filterChildren（）{
  if(el.component&&el.component.indexOf('operation')>-1
      ||el.component&&el.component.indexOf('special')>-1
      ||el.component&&el.component.indexOf('standingBook')>-1){
    delete el.component
  }
}

5、打包部署配置

1、主应用 vue.config.js 文件中配置 publicPath: process.env.NODE_ENV === "production" ? "./" : "/"
2、在主应用的路由文件中project/vue-main/src/router/index.js，设置router设置 base:'/dist/', /dist/为在服务器中部署主应用的目录，未在根目录上
  export default new Router({
    base:'/dist/',
    mode: 'hash',
    scrollBehavior: () => ({
    y: 0
    }),
    routes: constantRoutes
  })

3、子应用 vue.config.js 文件中配置 publicPath: process.env.NODE_ENV === 'production' ? './ppm/' : '/'，其中/ppm/ 为服务器放置的子应用文件路径
4、子应用 在project/vue-child-ppm/src/main.js文件中设置路由 base:'/ppm',其中/ppm/ 为服务器放置的子应用文件路径未在根目录
  router = new VueRouter({
    base:'/ppm',
    mode: 'hash',
    routes
  })
5、子应用在 project/vue-child-ppm/src/public-path.js文件修改 path
  if (window.__POWERED_BY_QIANKUN__) {
    if (process.env.NODE_ENV !== 'development') {
      //生成环境设置path，非根目录部署时需要拼接文件放置路径
      window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ + 'ppm/'
    }
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
  }

6、部署服务器上nginx配置，其中主应用打包后的部署路径为 /app/projectManager/web-qiankun/dist，子应用部署位置为/app/projectManager/web-qiankun/dist/ppm

server {
    listen 10104;
    server_name localhost;
    //前端主应用配置
    location  /dist {
      root  /app/projectManager/web-qiankun;
      try_files $uri $uri/ /dist/index.html;
      index  index.html index.htm;
    }
    //前端子应用配置
    location  /dist/ppm {
      root  /app/projectManager/web-qiankun;
      try_files $uri $uri/ /dist/ppm/index.html;
      index  index.html index.htm;
    }
}