做个微前端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

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:coding个人笔记

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端性能监控API-performance

    前端监控包括性能、错误、轨迹、热点等,之前用过的也就百度统计hmjs,其它知道的也就badjs、fundebugjs、frontjs等。估计很多大公司都有自己编...

    wade
  • ES6之symbol

    ES6引入了一种新的原始数据类型Symbol,是第七种数据类型,表示独一无二的值。语法:

    wade
  • Vue混入mixins

    混入(mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件...

    wade
  • 在CDH 6.3中安装Phoenix服务

    三、在Cloudera Manager中添加Phoenix服务(前提是已经安装了HBase服务)

    用户1148526
  • 程序员必知之SEO

    开始之前,让我们先了解一下:搜索引擎是如何工作的。 搜索引擎是如何工作的 如果你有时间,可以读一下 Google 的框架: http://infolab.sta...

    Phodal
  • 为什么是 Druid ?

    本文所讲的 Druid 并不是阿里开源的数据库连接池,本文所讲的 Druid 是一个分布式的支持实时分析的数据存储系统。

    zhisheng
  • Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十)

    通用操作是指一般的增删改查操作,逻辑大体都是一致的,所以统一抽象到CURD接口,需要用到CURD的表直接实现接口就可以了。

    朝雨忆轻尘
  • Go Web框架gin的入门教程

    目前,基于Go的web框架也可谓是百花齐放了,之所以选择gin ,没其他原因,就只是因为其在github上的star数是最多的,而且仅仅从README看,其文件...

    会呼吸的Coder
  • [六]JavaIO之 ByteArrayInputStream与ByteArrayOutputStream

    ByteArrayInputStream 和 ByteArrayOutputStream

    noteless
  • 一步一步提高C+编程的方法和步骤!

    门外汉:如果你还是刚刚接触c++,那么你应该先去买一本《C++编程思想》,这本书讲解非常详细,而且通俗易懂,当你将这些代码敲完之后,升级为菜鸟级别了 ? 菜鸟级...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券