初学 qiankun 微应用并搭建项目

随着项目的迭代，项目越来越庞大，使用的技术比较落后，难道要沿用老旧技术吗？ 不想用呢？怎么办？ 那就用使用微前端技术吧。微前端的核心价值在于 "技术栈无关"，这才是它诞生的理由，或者说这才是能说服我采用微前端方案的理由。

满足以下几点，你才确实可能需要微前端

1. 系统本身是需要集成和被集成的 一般有两种情况：
   a. 旧的系统不能下，新的需求还在来。
   没有一家商业公司会同意工程师以单纯的技术升级的理由，直接下线一个有着一定用户的存量系统的。而你大概又不能简单通过 iframe 这种「靠谱的」手段完成新功能的接入，因为产品说需要「弹个框弹到中间」
   b. 你的系统需要有一套支持动态插拔的机制。
   这个机制可以是一套精心设计的插件体系，但一旦出现接入应用或被接入应用年代够久远、改造成本过高的场景，可能后面还是会过渡到各种微前端的玩法。
2. 系统中的部件具备足够清晰的服务边界
   通过微前端手段划分服务边界，将复杂度隔离在不同的系统单元中，从而避免因熵增速度不一致带来的代码腐化的传染，以及研发节奏差异带来的工程协同上的问题。

qiankun 是根据路由劫持来实现的，只要设定好路由、挂载的子节点以及入口就可以了，是不是听起来很简单？ 我试图初步实现了下

初步实现

1. 首先用vue-cli 下载个项目，记得选上路由

 vue create mainApp // 作为主应用
 vue create child // 作为子应用

2. 主应用需要下载 qiankun

 yarn add qiankun

3. 修改主应用 App.vue

<template>
  <div id="mainApp">
    <nav>
      <router-link to="/">基于应用自己主页</router-link> |
      <router-link to="/child">子应用</router-link>
    </nav>
    <router-view />
    <!-- 子应用挂载的节点 -->
    <div id="childApp"></div>
  </div>
</template>

<style>
#mainApp {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注意： 这里需要将 id=‘app’ 改成别的名字或删除掉，否则会报错，如下内容：
'xxxx' died in status NOT_MOUNTED: [qiankun]: Target container with #childApp not existed after xxxx mounted!

4. 修改主应用main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// Vue.config.productionTip = false

// 引入qiankun
import { registerMicroApps,start } from 'qiankun'
// 注册app列表
const apps = [
  {
    name:'child',
    entry:'//localhost:9999', // 自动接在，解析js.动态执行，需要解决跨域
    container:'#childApp', // 子应用挂载元素
    activeRule:'/child',// 访问规则
    props:{
      a:1
    }
  }
]
registerMicroApps(apps) // 可以按需设置生命周期方法
start() // 在调用页面加载
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

5. 修改主应用路由router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
]

const router = new VueRouter({
  mode: 'history',
  base: '',
  routes
})

export default router

下面我们开始改子应用代码，子应用不需要下载 qiankun，需要修改的地方如下：

1. 修改子应用的main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

console.log("子应用····")
/* eslint-disable */

let instance = null
function render(props) {
  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount('#app'); // 这里是挂载到自己的html中  基座会拿到这个挂载后的html 将其插入进去
}

if (window.__POWERED_BY_QIANKUN__) { // 动态添加publicPath
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
if (!window.__POWERED_BY_QIANKUN__) { // 默认独立运行
  render();
}

// 父应用加载子应用，子应用必须暴露三个接口：bootstrap、mount、unmount
// 子组件的协议就ok了
export async function bootstrap(props) {

};

export async function mount(props) {
  render(props)
}

export async function unmount(props) {
  instance.$destroy();
}

2. 修改 vue.config.js

module.exports = {
  devServer: {
    port:9999,
    headers:{
      'Access-Control-Allow-Origin':'*' // 允许跨域
    }
  },
  configureWebpack: {
    output: {
      library:'child',  // 同package.json中名字相同
      libraryTarget:'umd'
    }
  }
}

3. 修改router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: '/child', // 同主应用中的activeRule相同
  routes
})

export default router

效果如下图

image.png
image.png

注意： 目前发现，主应用和子应用中的样式隔离问题需要注意下