qiankun整合vue过程

1.vue项目中安装乾坤

$ yarn add qiankun # 或者 npm i qiankun -S

2.在主应用router文件夹中新建micro-frontend.js文件，在此文件中注册微应用

import Layout from '@/layout'

export const apps = [

  {

    name: 'vue-child-rbac',

    // entry: '//localhost:9527',  //本地运行，值为子应用启动的端口，这是子应用的入口

    entry: '//localhost/child/vue-rbac/', // 部署

    container: '#content',  //子应用在主应用中挂载的容器，在容器标签内命名id="content"

    activeRule: '/app-rbac'  //子应用匹配的路由规则，与点击事件跳转的目标路径一致

  }

]

const microChildRouters = []

apps.forEach((item) => {

  const obj = {

    path: `${item.activeRule}:catchAll(.*)`,

    name: item.name,

    component: () => import('@/views/Micro.vue')

  }

  microChildRouters.push(obj)

})

export const microRouter = [

  {

    path: `/micro`,

    name: 'micro',

    component: Layout,

    // redirect: apps[0].activeRule,

    children: microChildRouters

  }

]

export default microRouter

3.新建plugins文件夹，在里面新建qiankun.js文件，内容如下

import { registerMicroApps, setDefaultMountApp } from 'qiankun'

import { apps } from '@/router/micro-frontend.js'

const _apps = []

apps.forEach(item => {

  _apps.push({

    name: item.name,

    entry: item.entry,

    container: item.container,

    activeRule: getActiveRule(item.activeRule)

  })

})

export default () => {

  registerMicroApps(_apps)

  setDefaultMountApp(apps[0].activeRule)

}

function getActiveRule(routerPrefix) {

  return location => location.pathname.startsWith(routerPrefix)

}

4.在views文件夹中新建micro.vue，在此启动qiankun

<template>

  <div />

</template>



<script>

import { start } from 'qiankun';



export default {

  mounted() {

    if (!window.qiankunStarted) {

      window.qiankunStarted = true;

      start();

    }

  }

}

</script>

5.在主应用main.js文件中引入

import initQiankun from './plugins/qiankun'

至此，主应用配置完成，下面看看子应用vue-rbac

子应用无需导入任何依赖即可接入qiankun，有 webpack 的微应用（主要是指 Vue、React、Angular）需要做的事情有：

1. 新增 public-path.js 文件，用于修改运行时的 publicPath。什么是运行时的 publicPath ？（俺也不懂，跟着做就好了）
2. 微应用建议使用 history 模式的路由，需要设置路由 base，值和它的 activeRule 是一样的。
3. 在入口文件最顶部引入 public-path.js，修改并导出三个生命周期函数。
4. 修改 webpack 打包，允许开发环境跨域和 umd 打包。

1.子应用src目录下新增public-path.js，并在main.js中引入，内容如下

if (window.__POWERED_BY_QIANKUN__) {

  // eslint-disable-next-line no-undef

  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__

}

2.在构造路由实例时，设置路由base

const createRouter = () => new Router({

  mode: 'history', // require service support

  base: window.__POWERED_BY_QIANKUN__ ? '/app-rbac/' : '/child/vue-rbac/', 

//这里base的值需要与主项目中的activeRule值对应，也就是/app-rbac/

  scrollBehavior: () => ({ y: 0 }),

  routes: constantRoutes

})

3.子应用main.js中导入刚刚新建的js文件，并暴露出几个生命周期函数供给主应用调用

import './public-path'

function render(props = {}) {

  const { container } = props

  instance = new Vue({

    router,

    store,

    i18n,

    render: (h) => h(App)

  }).$mount(container ? container.querySelector('#app') : '#app')

}

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)

  actions.setActions(props)

  render(props)

}

export async function unmount() {

  instance.$destroy()

  instance.$el.innerHTML = ''

  instance = null

}

export async function update(props) {

  console.log('update props', props)

}

4.在vue.config.js文件中增加如下内容

const packageName = require('./package.json').name

module.exports = {

devServer: {

headers: {

'Access-Control-Allow-Origin': '*',

},

},

configureWebpack: {

output: {

library: `${name}-[name]`,

libraryTarget: 'umd', // 把微应用打包成 umd 库格式

jsonpFunction: `webpackJsonp_${packageName}`,

},

},

};

完成上面的配置后，乾坤已经可以在本地运行了，主应用跳转的路径记得要与activeRule的值一致

<el-menu-item index="/app-rbac">

      RBAC&BPM

    </el-menu-item>

若想要在nginx上部署，需要做一些配置上的更改，这里将主应用和微应用部署到同一个服务器（同一个 IP 和端口）

1. 必须配置 webpack 构建时的 publicPath 为目录名称，

2. history 路由的微应用需要设置 base ，值为目录名称，用于独立访问时使用。

部署之后注意三点：

1. activeRule 不能和微应用的真实访问路径一样，否则在主应用页面刷新会直接变成微应用页面。
2. 微应用的真实访问路径就是微应用的 entry，entry 可以为相对路径。
3. 微应用的 entry 路径最后面的 / 不可省略，否则 publicPath 会设置错误，例如子项的访问路径是 http://localhost:8080/app1,那么 entry 就是 http://localhost:8080/app1/。

最后在nginx中的目录是这样的，注意对比好，结构要一模一样

└── html/ # 根文件夹

     ├── child/ # 存放所有微应用的文件夹 

        | ├── vue-rbac/ # 存放微应用 vue-rbac的文件夹

     ├── index.html # 主应用的index.html

     ├── css/ # 主应用的css文件夹

     ├── js/ # 主应用的js文件夹

1.先来配置一下主应用和子应用的publicPath 

publicPath: process.env.NODE_ENV === 'development' ? '/' : '/',  //主应用

 publicPath: process.env.NODE_ENV === 'development' ? '/' : '/child/vue-rbac/', //子应用，这里的值对应的就是nginx中子应用的地址，命名要与自己的项目对应起来。

2.子应用的路由base，刚刚已经设置过了，在router构造实例时

base: window.__POWERED_BY_QIANKUN__ ? '/app-rbac/' : '/child/vue-rbac/',

3.再回头看看主应用注册子应用时的更改

export const apps = [

  {

    name: 'vue-child-rbac',

    // entry: '//localhost:9527',  //本地运行

    entry: '//localhost/child/vue-rbac/', // 部署时只有一个端口，入口是子应用所在位置，最后的/不要省略

    container: '#content',

    activeRule: '/app-rbac'

  }

]

在浏览器中输入localhost/   最后的/不要省略！

至此主应用已经和微应用都能跑起来了，但是主应用和 vue-history、react-history、angular-history 微应用是 history 路由，需要解决刷新 404 的问题，nginx 还需要配置一下：

server {

listen 8080;

server_name localhost;

location / {

root html;

index index.html index.htm;

try_files $uri $uri/ /index.html;

}

location /child/vue-history {

root html;

index index.html index.htm;

try_files $uri $uri/ /child/vue-history/index.html;

}

# angular 和 react 的history 配置同上

}

好了结束了