原标题：微前端 qiankun 项目实践

作者：zxh1307

https://juejin.im/post/5ea55417e51d4546e347fda9

导语

最近在做微前端的项目 , 过程中真是踩了不少坑 , 在有限的资料中不断试错 , 默默无语两行泪 哈哈. 在此次将踩坑部分都记录下来, 让更多的人少走点弯路 , 此项目使用 蚂蚁金服qiankun为基础作为开发 . 话不多说 开讲 !!!

那什么是 qiankun 呢

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

什么是微前端

微前端架构具备以下几个核心价值：

技术栈无关

主框架不限制接入应用的技术栈，微应用具备完全自主权

独立开发、独立部署

微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

增量升级

在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

独立运行时

每个微应用之间状态隔离，运行时状态不共享

摘自 qiankun官方文档

主应用配置

此次项目 主应用与 子应用均为 vue ,

下载 qiankun npm install qiankun

在主应用中注册微应用 // 导入乾坤函数

import{

registerMicroApps,

setDefaultMountApp,

start

} from"qiankun";

封装 render 方法

此方法在main.js 中要初始调用一次, 主要用来挂载主应用 , 之后子应用分别依次调用 ,所以故作判断. 传入的参数分别为 子应用 的 HTML 和 加载状态 content 字段 我们用 vuex 存储 起来,方便使用

letapp = null;

functionrender( { appContent, loading }){

if(!app) {

app = newVue({

router,

store,

render: h=>h(App),

}).$mount( '#app');

} else{

store.commit( 'microApp/changeCenter', appContent);

store.commit( 'microApp/changeLoading', loading);

}

}

微应用注册

下文中的apps 可以为获取后数据 , 注册微应用 本文案例比较简单,方便大家理解 ,

在注册自应用的参数 ** container 与 render** 踩坑比较多,下边会着重讲解.

functiongenActiveRule( routerPrefix){

returnlocation=>location.pathname.startsWith(routerPrefix);

}

//传递给子应用的数据

letmsg = {


data: '修炼爱情的辛酸,学会放好以前的渴望'

}

letapps = [

{

name: 'linjunjie',

entry: '//localhost:215', // 改成自己子应用的端口号

container: '#subView', //节点 id // 沙盒模式

// render:render, // 普通模式

activeRule: genActiveRule( '/star'),

props:msg

}

]

//注册的子应用 参数为数组

registerMicroApps(apps,{

beforeLoad: [

app=>{

console.log(app)

console.log( '[LifeCycle] before load %c%s', 'color: green;', app.name);

},

],

beforeMount: [

app=>{

console.log( '[LifeCycle] before mount %c%s', 'color: green;', app.name);

},

],

afterUnmount: [

app=>{

console.log( '[LifeCycle] after unmount %c%s', 'color: green;', app.name);

},

],

});

setDefaultMountApp( '/star/linjunjie')

//开启沙盒模式

start({

sandbox:{ strictStyleIsolation: true}

})

当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

主应用为子应用准备的 展示元素

< divid= "app">

< divid= "nav">

< div@ click= "onChangePage('/star/linjunjie')">林俊杰 div>

< div@ click= "onChangePage('/star/zhangyixin')">张艺兴 div>

div>

< divid= "subView"class= "sub-content-wrap"v-html= "content"> div>

div>

template>

< >

import{ mapState } from'vuex';

exportdefault{

data{

return{

}

},

computed:{

//获取子应用HTML 数据

...mapState( 'microApp', [ 'content']),

...mapState( 'microApp', [ 'mircoAppLoading']),

},

methods:{

//定义跳转方法

onChangePage(url){

console.log(url)

this.routerGo(url, '我喜爱的男明星')

},

routerGo(href = '/', title = null, stateObj = {}) {

window.history.pushState(stateObj, title, href);

},

}

}

>

子应用配置

关于子应用的配置相对较简单 , 不需要额外下载qiankun 主要将生命钩子 导出即可

导出响应的生命钩子

导出 bootstrap 、 mount 、 unmount 三个生命周期钩子，以供主应用在适当的时机调用。 注意，实例化路由时，判断当运行在qiankun环境时，路由要添加前缀，前缀与主应用注册子应用函数genActiveRule("/subdemo")内的参数一致

'star' 值需要与主应用的值对应 genActiveRule("/star") 中的值需要商定好 主应用与微应用都要使用

如果 new VueRouter 不在main.js 中 配置 ,请将此配置移动到 main.js 方便管理

importroutes from'./router'//将路由信息导出方便使用

letrouter = null;

letinstance = null;

functionrender( props = {}){

const{ container } = props;

router = newVueRouter({

base: window.__POWERED_BY_QIANKUN__ ? '/star': '/',

mode: 'history',

routes,

});

instance = newVue({

router,

store,

render: h=>h(App),

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

}

if(! window.__POWERED_BY_QIANKUN__) {

render;

}

exportasyncfunctionbootstrap( ){

console.log( '[vue] vue app bootstraped');

}

exportasyncfunctionmount( props){

//props 包含主应用传递的参数 也包括为子应用 创建的节点信息

console.log(props)

render(props);

}

exportasyncfunctionunmount( ){

instance.$destroy;

instance = null;

router = null;

}

配置微应用的打包工具

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

module.exports = {

output: {

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

libraryTarget: 'umd',

jsonpFunction: `webpackJsonp_${packageName}`,

},

};

子应用判断 子应用中新建 publicPath.js 在main.js 引入

if( window.__POWERED_BY_QIANKUN__) {

//处理资源

__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;

}

处理 资源加载问题

配置 vue.config.js

module.exports = {

publicPath: `//localhost: ${port}`,

}

vue.config.js 完整配置 constpath = require( 'path');

constpackageName = require( './package').name;

functionresolve( dir){

returnpath.join(__dirname, dir);

}

constport = 7101; // dev port

module.exports = {

publicPath: `//localhost: ${port}`,

outputDir: 'dist',

assetsDir: 'static',

filenameHashing: true,

devServer: {

// host: '0.0.0.0',

hot: true,

historyApiFallback: true, //添加 重点

port,

overlay: {

warnings: false,

errors: true,

},

headers: {

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

},

},

configureWebpack: {

resolve: {

alias: {

'@': resolve( 'src'),

},

},

output: {

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

libraryTarget: 'umd',

jsonpFunction: `webpackJsonp_ ${packageName}`,

},

},

};

踩坑记录当前页面为子应用时, 刷新页面404

以下方式均为主应用配置

方式一 删除 mode 配置项

mode: 'history', // 将此配置代码删除

方式二 配置404 页面

如果没有注释掉 mode: 'history' 此参数 将404 页面重新导向 home首页

{

path: '*',

name: 'indexNotFound',

component: resolve=>require([ '@/components/home'], resolve),

children: HomeChild,

},

子应用 样式隔离 开始沙箱模式 遇到的问题

主应用配置 sandbox :{strictStyleIsolation: true} 渲染模式由 render 模式 改为 container container:'#subView' , 此时 子应用的 挂载 dom 为

子应用配置 上文有提到 主要代码 截取instance =

newVue({

router,

store,

render: h=>h(App),

}).$mount(container ? container.querySelector( '#app') : '#app'); //重点

遇到的问题: 开启沙箱模式,如果是 采用 render 模式会报错 ,故选择container 模式

效果图

写到这里,项目已经构建完成了 让我们来看看效果吧

这里是完整代码 方便大家学习 代码github地址:https://github.com/zxh1307/qiankun-vue

项目问题

为啥我项目启动后看不到子应用的效果

将master 主应用 main.js 中 注册的 子应用的端口号 改成自己项目的端口号即可

结语

开发中还有其他坑 忘记记录了, 千万记得项目部署子应用资源跨域的问题 , 需要Nginx配置跨域问题返回搜狐，查看更多

责任编辑：