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)需要做的事情有:
- 新增
public-path.js
文件,用于修改运行时的publicPath
。什么是运行时的 publicPath ?(俺也不懂,跟着做就好了) - 微应用建议使用
history
模式的路由,需要设置路由base
,值和它的activeRule
是一样的。 - 在入口文件最顶部引入
public-path.js
,修改并导出三个生命周期函数。 - 修改
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 和端口)
-
必须配置
webpack
构建时的publicPath
为目录名称, -
history
路由的微应用需要设置base
,值为目录名称,用于独立访问时使用。
部署之后注意三点:
activeRule
不能和微应用的真实访问路径一样,否则在主应用页面刷新会直接变成微应用页面。- 微应用的真实访问路径就是微应用的
entry
,entry
可以为相对路径。 - 微应用的
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 配置同上
}
好了结束了