做个微前端demo

之前已经分享过微前端，至于落地还是不落地就看公司和项目了，今天基于微前端做了个小demo，分享一下。可以去qiankun官网看看，包括微前端核心设计理念、为什么不是ifram和快速上手及一些问题都很清楚。

因为自己一直用的都是vue，所以基座和子应用都是用vue脚手架快速搭建，至于接入react和jquery项目的，还得自己去研究测试，今天只是展示demo，代码的含义官网都有很详细的解释，这边就不注释了。

基座安装依赖：npm install qiankun -S

然后main.js里面配置：

import {registerMicroApps,start} from 'qiankun'

const apps = [

{

name:'admin',

entry:'//localhost:8081/',

container:'#admin',

activeRule:'/admin'

},

{

name:'factory',

entry:'//localhost:8082/',

container:'#factory',

activeRule:'/factory'

},

{

name:'frontend',

entry:'//localhost:8083/',

container:'#frontend',

activeRule:'/frontend'

}

]

registerMicroApps(apps);

start();

app.vue里面添加容器：

<router-view v-show="$route.name"/>

<div id="factory" v-show="!$route.name"></div>

<div id="admin" v-show="!$route.name"></div>

<div id="frontend" v-show="!$route.name"></div>

加个判断只是单纯的控制一下显示隐藏基座应用。

子应用不需要什么依赖，直接main.js配置：

let instance = null;

function render(){

instance = new Vue({

router,

store,

render: h => h(App)

}).$mount('#app')

}

if(window.__POWERED_BY_QIANKUN__){

__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;

}

if(!window.__POWERED_BY_QIANKUN__){render()}

export async function bootstrap(){}

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

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

打包和开发需要配置：

module.exports = {

devServer: {

port: '8082',

headers:{

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

}

},

configureWebpack:{

output:{

library:'factory',

libraryTarget:'umd'

}

}

}

开发配置允许跨域，因为qiankun是以fetch请求资源，打包需要指定库和模式。

这些配置官网都有，这边提一些自己遇到的一些小状况：

报错：application 'factory' died in status NOT_MOUNTED: [qiankun] Target container with #factory not existed after factory mounted!

基座app.vue里面的跟标签id是app，修改这个id就可以，一开始我还以为的html模板id要改，后来发现只要改app.vue里面的。

子应用通过基座关联，路由是都要匹配某个key的，所以子应用要在路由那边配置base，这样子应用自己的路由切换都会带上那个key了。基座和子应用样式是不隔离的，官网也给出了解决方案，手动给前缀。目前没有找到不刷新的子应用之间跳转和子应用跳转基座，其实就是用a标签跳转，只有通过基座跳转才能不刷新。基座应该建议充当路由导航，单纯作为接入子应用。

打包之后，我用http-server当作服务器启动了项目，启动需要--cors允许跨域，直接运行就可以了，子应用也可以单独运行。如果是线上发布，那就得配置代理还是允许跨域之类的，这就要看运维觉得怎么做更好，但是绝对不是配置*。

这只是简单的demo，创建了三个子应用跑一下看看。只有真正用来开发项目之后，才能发现还有很多状况需要解决，这边只是单纯的跑个应用，代码上传git了：

https://github.com/wade3po/qiankundemo