新的项目新的开始,为了避免后期冗余,这次就花了些时间学习了下,其实中间没怎么发现什么坑,如果非说一个 那就是 主应用和子应用的路由 这块绕了一点,有可能场景比较简单吧;
这边主应用是用了 vue element admin 的模板 其实主要是 用左侧的菜单栏部分;
在layout 声明 挂载的 dom节点,剩下的只是配置路由部分,如下:
children 部分不需要组件
{
path: '/test',
name: 'testname',
component: Layout,
children: [
{
path: '',
name: 'index',
meta: {
child: true,
activeMenu: '/test',
title: '文章标题',
icon: 'el-icon-lock',
affix: true
}
},
{
hidden: true,
path: 'about',
name: 'testabout',
meta: {
child: true,
activeMenu: '/test',
title: '微前端',
icon: 'el-icon-lock',
affix: true
}
}
]
}
只需要初始化一次
layout/index
// 只初始化一次
if (!window.qiankunstart) {
window.qiankunstart = true
start({
// 重写fetch 过滤 重复的资源地址(主程序和子程序 重复的js文件)
fetch(url, ...args) {
if (filterUnUsefullJs(url)) {
return {
async then() {
return ''
},
async text() {
return ''
}
}
}
return window.fetch(url, ...args)
}
})
}
- Vue 重命名
恰巧这种场景我碰到了,一些公共资源是不参与打包的 包括, 所以根据官网常见问题,
Vue Router 报错 Uncaught TypeError: Cannot redefine property: $router
//externals
'element-ui': 'ELEMENT',
vue: "Vue2",
'vue-router': 'VueRouter'
解决
window.Vue2 = Vue window.Vue = undefined
- router 部分配置
有时候子应用可能要跳出新的页面来访问
const { container, activeRule, staticRoute } = props;
console.log('render-----child', window.__POWERED_BY_QIANKUN__, props)
router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? activeRule : (staticRoute || '/'), //这里考虑到独立访问的情况, 独立跳出之后全局状态无法获取
mode: window.__POWERED_BY_QIANKUN__ ? 'history' : 'hash',
routes,
});
主应用透传 staticRoute 其实就是部署路径
hash 是为了减少 nginx 配置项,nginx 配置没有进入工程化环节,所以就用hash了