前言✨
本文介绍了用qiankun微前端框架用来集成vue应用的基本方案以及集成过程中遇到的一些常见问题。
一、基本使用
主应用
1.先安装 qiankun
:
1 | $ yarn add qiankun # 或者 npm i qiankun -S |
2.注册微应用并启动:
1 | import { registerMicroApps, start } from 'qiankun' |
微应用
Vue 微应用
微应用不需要额外安装任何其他依赖即可接入 qiankun 主应用。
以 vue 2.x
项目为例
在
src
目录新增public-path.js
,并在main.js
最顶部引入public-path.js
1
2
3if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}微应用建议使用
history
模式的路由,需要设置路由base
,值和它的activeRule
是一样的1
2
3
4
5const router = new VueRouter({
mode: 'history',
base: window.__POWERED_BY_QIANKUN__ ? '/vue2' : '/',
routes
})
在入口文件
main.js
中修改并导出bootstrap
、mount
、unmount
三个生命周期函数,保证微应用单独运行且能在qiankun环境中运行。为了避免根 id#app
与其他的 DOM 冲突,需要限制查找范围。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37import './public-path'
import Vue from 'vue'
import App from './App.vue'
import routes from './router'
import store from './store'
Vue.config.productionTip = false
let instance = null
function render(props = {}) {
const { container } = props
instance = new Vue({
router,
store,
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')
}
// 在qiankun中运行时
export async function mount(props) {
render(props)
}
export async function unmount() {
instance.$destroy()
instance.$el.innerHTML = ''
instance = null
}修改
webpack
打包,允许开发环境跨域和umd
打包(vue.config.js
):1
2
3
4
5
6
7
8
9
10
11
12
13
14
15const { name } = require('./package');
module.exports = {
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
},
configureWebpack: {
output: {
library: `${name}-[name]`,
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
jsonpFunction: `webpackJsonp_${name}`,
},
},
};
二、细节
1.生命周期
通过此图我们可以了解主应用和子应用的钩子函数的加载顺序,方便我们对其进行控制。
2.样式隔离
qiankun提供了两种隔离模式:
- 1.严格沙箱(不推荐)开启此配置时,子应用会以Shadow DOM 的形式嵌入到主应用,实现真正的样式隔离,但是同时会带来新的问题:
1
start({sandbox: {strictStyleIsolation: true}})
Popover弹出框、Select下拉选项、Dropdown下拉菜单等会因找不到主应用的body会丢失,或跑到整个屏幕外。(目前还没有找到解决的办法,todo)
- 2.实验沙箱(不推荐)开启此配置时,相当于实现了类似于vue中style标签中的scoped属性,qiankun会自动为子应用所有的样式增加后缀标签,如:
1
start({sandbox: {experimentalStyleIsolation: true}})
div[data-qiankun-microName]
,此配置会导致:
Popover弹出框、Select下拉选项、Dropdown下拉菜单等插入到主应用中,而主应用不能访问到scope域的样式,而导致样式丢失。
解决方案: 可以把子应用的弹窗样式copy一份至主应用的全局样式中。但是此方法带来的维护成本太大。
不采用qiankun的沙箱隔离
既然qiankun带来的沙箱隔离带来这么多问题, 我们能不能自己来实现样式隔离了,下面提供三个思路:
1.采用规范的命名(主应用公共样式较少时推荐)
在主应用的公共样式比较少的情况下可以使用规范唯一的命名来避免样式污染(如采用
BEM
规范来命名),把非公共样式尽量利用vue的scoped属性进行隔离。2.采用css-module的方式隔离(主子隔离时,推荐)
(1)在主应用的vue.config.js
里,加入如下配置,以.module.(css|less|sass|scss|styl) 结尾的css开启模块化1
2
3
4
5
6
7
8
9
10
11
12
13
14module.exports = {
css: {
extract: false, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: true,
requireModuleExtension: true, // true则只有以.module.(css|less|sass|scss|styl) 结尾的开启模块化
loaderOptions: {
css: {
modules: {
localIdentName: '[path][name]-[hash]'
}
}
}
}
}
(2)然后公共样式以模块化的方式引入,然后再绑定在页面相应的class上,下面是一个模块化css引入并使用的示例:
1 | <template> |
- 3.安装配置postcss-plugin-namespace插件来实现隔离(如果多个子应用同时出现在一个页面,推荐)
(1) 添加依赖(2) 配置postcss1
npm i postcss-plugin-namespace -D
在postcss.config.js
中添加如下配置上述配置相当于给工程的所有样式添加了一个作用域前缀1
2
3
4
5
6
7module.exports = {
plugins: [
require('postcss-plugin-namespace')('.main-project', { // 相当于给工程的css加一个作用域前缀
ignore: ['*']
})
]
}.main-project
,我们只需要在挂载的根节点加上这个class,就可以实现应用之间的隔离。
3.history模式下publicPath
不能使用相对路径,需使用绝对路径
主应用需配置
1 | publicPath:'/' |
4.应用间的通信
qiankun提供了initGlobalState
onGlobalStateChange
setGlobalState
用于通信。
主应用我们可以直接导入
1 | import { initGlobalState } from 'qiankun' |
子应用我们需在生命周期里把onGlobalStateChange
setGlobalState
挂载到子应用的vue对象上:
1 | export async function mount(props) { |
5.如何在主应用的多级嵌套路由页面下加载微应用
主应用注册这个路由时给 path
加一个 *
,使其在未匹配到主应用的某个页面时,也能加载主应用的外框,确保子应用要挂载的容器存在。
1 | import empty from "./../empty" |
另外在注册微应用时,activeRule
需要包含主应用的这个路由 path
1 | registerMicroApps([ |
子应用的路由注册时base
也需要加上这个path
1 | function render(props = {}) { |
6.微应用打包之后 css 中的字体文件和图片加载 404
原因是 qiankun
将外链样式改成了内联样式,但是字体文件和背景图片的加载路径是相对路径。而 css
文件一旦打包完成,就无法通过动态修改 publicPath
来修正其中的字体文件和背景图片的路径。
借助 webpack
的 url-loader
将字体文件和图片打包成 base64
(适用于字体文件和图片体积小的项目)(推荐)
vue-cli3
项目写法:
1 | module.exports = { |
7.发布时,微应用的nginx要配置支持跨域
只需要在微应用Nginx的配置文件中配置以下参数:
1 | location / { |
主应用的nginx需要配置代理转发:
1 | location ~ ^/api/ { |
更多细节方案持续更新中~🚀🚀🚀