[qiankun] 微前端实践（一）

新的项目新的开始，为了避免后期冗余，这次就花了些时间学习了下，其实中间没怎么发现什么坑，如果非说一个 那就是 主应用和子应用的路由 这块绕了一点，有可能场景比较简单吧；

这边主应用是用了 vue element admin 的模板 其实主要是 用左侧的菜单栏部分；

在layout 声明 挂载的 dom节点，剩下的只是配置路由部分，如下：

children 部分不需要组件

{
    path: '/test',
    name: 'testname',
    component: Layout,
    children: [
      {
        path: '',
        name: 'index',
        meta: {
          child: true,
          activeMenu: '/test',
          title: '文章标题',
          icon: 'el-icon-lock',
          affix: true
        }
      },
      {
        hidden: true,
        path: 'about',
        name: 'testabout',
        meta: {
          child: true,
          activeMenu: '/test',
          title: '微前端',
          icon: 'el-icon-lock',
          affix: true
        }
      }
    ]
  }

只需要初始化一次
layout/index

// 只初始化一次
    if (!window.qiankunstart) {
      window.qiankunstart = true
      start({
        // 重写fetch 过滤 重复的资源地址(主程序和子程序 重复的js文件)
        fetch(url, ...args) {
          if (filterUnUsefullJs(url)) {
            return {
              async then() {
                return ''
              },
              async text() {
                return ''
              }
            }
          }
          return window.fetch(url, ...args)
        }
      })
    }

• Vue 重命名
  恰巧这种场景我碰到了，一些公共资源是不参与打包的 包括, 所以根据官网常见问题，

Vue Router 报错 Uncaught TypeError: Cannot redefine property: $router
//externals
'element-ui': 'ELEMENT',
 vue: "Vue2",
 'vue-router': 'VueRouter'

解决

window.Vue2 = Vue   window.Vue = undefined

• router 部分配置

有时候子应用可能要跳出新的页面来访问

 const { container, activeRule, staticRoute } = props;
  console.log('render-----child', window.__POWERED_BY_QIANKUN__,  props)
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ?  activeRule : (staticRoute || '/'), //这里考虑到独立访问的情况, 独立跳出之后全局状态无法获取
    mode: window.__POWERED_BY_QIANKUN__  ? 'history' : 'hash',
    routes,
  });

主应用透传 staticRoute 其实就是部署路径
hash 是为了减少 nginx 配置项，nginx 配置没有进入工程化环节，所以就用hash了