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里面添加容器：

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

子应用不需要什么依赖，直接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

(完)