微前端搭建子项目踩得坑（子应用挂载后容器不存在问题）

基于阿里的qiankun 框架搭建的微前端

1.先搭建主项目

先安装qiankun框架官网https://qiankun.umijs.org/zh/guide

cnpm i qiankun -S

1.在入口文件main.js添加配置

import { registerMicroApps, start } from 'qiankun'const apps = [{name: 'vueApp', // 子应用的名称entry: '//localhost:9000', // 子应用的入口container: '#vue', // 子应用展示的容器activeRule: '/vue', // 子应用的routerprops: { a: 1 } // 父应用向子应用传递参数}
]registerMicroApps(apps)
start({ prefetch: false, strictStyleIsolation: true })
// strictStyleIsolation css沙箱配置， prefetch 预加载配置

2.在布局layout文件下添加子应用容器

<el-menu :default-active="activeIndex" mode="horizontal" router><el-menu-item index="/">基础的</el-menu-item><el-menu-item index="/vue">vue</el-menu-item>
</el-menu>
<router-view/>
<div id="vue"></div>

2.子应用配置

1.使用qiankun，主应用必须接受三个函数，在main.js里面添加，并且判断是独立运行还是在主项目中引用

let instance = null
const render = (props) => {instance = new Vue({router,render: h => h(App)}).$mount('#vue-app');
}if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
if (!window.__POWERED_BY_QIANKUN__) { // 默认独立运行render();
}// 子组件的协议就ok了
export async function bootstrap(props) {};
export async function mount(props) {console.log(props)render(props)
}
export async function unmount(props) {instance.$destroy();
}

2.路由里面添加前缀

const router = new VueRouter({mode: 'history',base: window.__POWERED_BY_QIANKUN__ ? "/vue" : "/",routes
})

3.配置文件vue.config.js添加容许跨域配置headers

module.exports = {devServer: {port: 9000,headers: {'Access-Control-Allow-Origin': '*'}},configureWebpack: {output: {library: 'vueApp',libraryTarget: 'umd',jsonpFunction: `webpackJsonp_vueApp`,}}
}

到此基本的项目已经搭建完成了，但是我在项目中遇到一个重要的坑就是，点击vue
包承载子项么的容器丢失
重点(坑)
原因是因为主项目和子项目都是用id为app，造成子项目直接挂在在app上，导致主项目里面承载子项目的容器丢失，此时应当改子项目的id

// app.vue
<div id="vue-app"><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></div><div>header</div><div>第一次提交</div><router-view/>
</div>
// index.html
<noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="vue-app"></div>

到此就没有了，后面有遇到再补充

微前端搭建子项目踩得坑（子应用挂载后容器不存在问题）相关推荐

微前端qiankun使用+踩坑
背景项目使用qiankun 改造的背景: 项目A.项目B.项目C: 项目A和项目B具有清晰的服务边界,从服务类型的角度能够分为两个项目. 在公司项目一体化的背景下,所有的项目又应该是一个项目. 项目 ...
搭建RocketMQ踩的坑
RocketMQ搭建步骤开发环境 64位 centos7(虚拟机,1G内存) 64位 jdk1.8 maven 3.5.0 Git tomcat(用于启动rocketmq-console) rock ...
搭建gateway踩的坑
最近自己搭了一个spring gateway网关,一个eureka注册中心,和两个应用,采用openFeign进行两个应用间的通讯,搭建步骤主要参考:http://t.csdn.cn/WBIsz 这个 ...
搭建RocketMQ踩的坑- No name server address
1.按照apache官网的Simple Message Example,来写报错No name server address 推荐直接按照官网把源码下载下来,上面有例子官网贴出来的是缩略版要知道n ...
搭建RocketMQ踩的坑-内存不足
环境是vmvare+ubuntu 1.http://rocketmq.apache.org/docs/quick-start/ 按照官网来启动mqnamesrv和mqbroker报错错误如下 ...
微前端vue项目实战 -- 乾坤qiankun框架（一）
背景: 公司研发的项目主要是 GIS地图为基础的管理系统,由主体项目(管理业务模块)+ GIS地图应用,由于 GIS地图应用模块会在多个地方使用,所以单独构建一个项目,分别在不同的业务场景中引用.交 ...
关于微前端，你想知道的都在这!
更多请关注微前端专题 https://codeteenager.github.io/Micro-Frontends/ 介绍微前端官网:https://micro-frontends.org/ 问题: ...
【微前端】591- 微前端在小米 CRM 系统的实践
前言微前端跟Serverless,当前前端热门话题. @木子朗,小米前端工程师,目前专注于前端架构.前端工程化,热衷于打造高质量.高性能.用户体验一流的产品.个人网站:https://www.li ...
微前端在小米 CRM 系统的实践
作者 | 木子朗 https://www.lishuaishuai.com/architecture/1344.html 大型组织的组织结构.软件架构在不断地发生变化.移动优先(Mobile Firs ...

微前端搭建子项目踩得坑（子应用挂载后容器不存在问题）

1.先搭建主项目

2.子应用配置

微前端搭建子项目踩得坑（子应用挂载后容器不存在问题）相关推荐

最新文章

热门文章