微前端（qiankun）使用心得

1.第一步先下载

npm i -S qiankun

2.第二步配置主应用

import { registerMicroApps, start } from 'qiankun'

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#qiankun-app')


const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);


registerMicroApps([
  {
    name: 'vue-system-app',
    entry: '/qiankun/system/',
    container: '#container',
    activeRule: getActiveRule(`#/system`),
    props: {
      path: '/system'
    }
  },
  {
    name: 'vue-micro-app',
    entry: '//localhost:10200',
    container: '#container',
    activeRule: getActiveRule(`#/vue2-micro-app`),
    props: {
      path: '/vue2-micro-app'
    }
  }
])

start({ sandbox: { experimentalStyleIsolation: true } })

1. name： 微应用的打包文件名称
2. entey： 微应用的服务地址
3. container： 主应用挂载微应用需要dom节点
4. activeRule: 解析url地址，配置规则
5. props: 传给微应用的参数

3.配置微应用 

main.js

import { getRouter } from './router'

if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__POWERED_BY_QIANKUN__
        ? window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
        : `http://${ip}:${port}/`; // 填写你的实际部署地址
}


let instance = null;
function render(props = {}) {
  const { container } = props;
  const _router = getRouter(props)
  console.log(_router)

  instance = new Vue({
    router: _router,
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector("#app-vue") : "#app-vue");
}

// 独立运行时
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);
  props.onGlobalStateChange((state, prev) => {
    console.log(state, prev)
  })
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = "";
  instance = null;
}

微应用路由需要修改

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

let router;
let microPath = '';

export const getRouter = (props) => {



  const routes = [
    {
      // 给微应用配置一个固定前缀
      path: '/',
      redirect: '/home',
      name: '微应用',
      component: () => import(/* webpackChunkName: "home" */ '../views/Home'),
    },
    {
      path: '/home',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ '../views/Home'),
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import(/* webpackChunkName: "login" */ '../views/Login'),
    }
  ]

  if (window.__POWERED_BY_QIANKUN__) {
    microPath = props.path

    if (props) {
      routes.forEach(v => {
        if (v.path) {
          if (v.redirect) {
            v.redirect = microPath + v.redirect
          } else {
            v.path = microPath + v.path
          }
        }
      })
    }
  }





  router = new VueRouter({
    base: process.env.BASE_URL,
    routes,
  })


  let routerPush = VueRouter.prototype.push;
  VueRouter.prototype.push = function push(location) {
    return routerPush.call(this, location).catch(err => err)
  }


  // 路由守卫
  router.beforeEach((to, from, next) => {
    if (to.path !== (microPath + '/login')) {
      // if (store.state.token) {
      //   console.log("已经登录 token=", store.state.token)
      //   if (window.__POWERED_BY_QIANKUN__ && !to.path.includes('vue2-micro-app')) {
      //     next(microPath + to.path)
      //   } else {
      //     next()
      //   }
      // } else {
      //   console.log("子应用 - 未登录 请登录")
      //   next(microPath + '/login')
      // }
      if (window.__POWERED_BY_QIANKUN__ && !to.path.includes(microPath)) {
        next(microPath + to.path)
      } else {
        next()
      }
    } else {
      next()
    }
  })

  return router
}

// 防止连续点击多次路由报错




export default router

配置vue.config.js

vue.config.js

module.exports = {
 devServer: {
    open: true,
    port: 10200,
    disableHostCheck: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },

  configureWebpack: {
    
    output: {
      // 微应用的包名，这里与主应用中注册的微应用名称一致
      library: "vue-micro-app",
      // 将你的 library 暴露为所有的模块定义下都可运行的方式
      libraryTarget: "umd",
      // 按需加载相关，设置为 webpackJsonp_VueMicroApp 即可
      jsonpFunction: `webpackJsonp_vue-micro-app`,
    },
  },
}

具体细节看乾坤官网