微前端项目是将每一个可以独立开发,测试,部署的子项目集合到一个主项目之下。对于用户来说,主项目仍然是一个完整的产品,而整个组装的过程对于用户来说,是透明的。
微前端不仅仅可以兼容不同的开发环境还可以兼容技术栈。可以做到更大程度的解耦合。
// 启动 qiankun
start();主应用路由如果是http://localhost:8080 那么 http://localhost:8080/mydemo 就会拉起微应用。
配置参考https://qiankun.umijs.org/
微应用需要独立的启动,且配置的端口和主应用注册的微应用端口一致
主应用
entry端口需要与微应用一致,同时微应用需要运行
假设 是两个 vue的应用
主应用
{
path: '/',
name: 'Home',
component: Home
}
显示效果
{
path: '/subvue/',
name: 'Home',
component: Home
}
path为 微应用的激活规则
正确的路由跳转
子应用的跳转需要加入前缀!!
微应用渲染时 在base上设置微应用的范围
router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? '/subvue/' : '/',
mode: 'history',
routes
})
此时,所有的子路由内的跳转,会加上 /subvue/所以 routers内 则不需要手动加上前缀
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。