个人的浅薄理解，能帮助到你那就再好不过了
先用vue cli创建了三个vue项目，没用试过别的框架（个人认为没有多大价值且无趣）
vue create xxx
使用其中一个叫做qiankunbase的作为项目基座，剩下两个作为子项目
先改写基座项目当中的入口js（vue cli创建出来的是main.js），大致分为两个目的：
a.配置子项目地址 b.配置项目间的数据传递
值得注意一点的是，我用的是qiankun2.0，过程中使用到过已经有变化的1.0的配置字段（render），造成不必要的精力浪费，https://qiankun.umijs.org/zh/faq官网总结查问题将是你的第一选择
const apps = [ // 子项目的地址配置 { name: 'mainapp', entry: '//localhost:8081', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch container: '#mainapp', // 项目页面容器id props: msg, // 可传递属性 activeRule: '/portal/mainapp' // 激活的路径`` }, { name: 'toolapp', entry: '//localhost:8082', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch container: '#toolapp', // 项目页面容器id props: msg, activeRule: '/portal/toolapp' // 激活的路径 } ]
其他的代码基本没有改动，最后调用一下registerMicroApps完成注册就是了（记得在基座的跳转组件挂载后使用qiankunjs 提供的start方法）
路由router/index.js里面也需要写，这个 * 号我以为是所有路由的意思，不过好像需要传个值0， 比如组件里$router.push（{ name, params: { 0: 1}}）
const routes = [ { path: '/index', name: 'index', }, { path: '/portal/*', name: 'portal', component: Portal, children: [ { path: '/portal/mainapp', name: 'mainapp' }, { path: '/portal/toolapp', name: 'toolapp' } ] }, ] const router = new VueRouter({ mode: 'history', base: '/', routes })
方便简单操作，基座主页写了几个button跳转页面，本来看到有人在
<div class="container" > <div id="mainapp" ></div> <div id="toolapp" ></div> </div> <!-- <router-view > --> <!-- <div id="mainapp" ></div> <div id="toolapp" ></div> --> <!-- </router-view> -->
基座部分最后创建了个vue.config.js固定了一下端口号，因为不想三个项目到时候因为启动顺序而端口号发生什么变化
子项目部分
改改main.js，主要目的有两个：
a.提供生命周期给基座 b.挂载到基座提供的节点上面
期间挂载的时候直接使用$mount('#toolapp'）的方式一直挂载不上，后来使用基座传递的节点信息进行挂载得以成功大致如下、
`function render(props = {}) {
const { container } = props;
router = new VueRouter({
base: window.POWERED_BY_QIANKUN ? '/toolapp' : '/',
mode: 'history',
routes,
});
instance = new Vue({
router,
render: h => h(App),
}).$mount(container ? container.querySelector('#toolapp') : '#toolapp');
// $mount('#toolapp'）
}
`
子项目还有一点就是webpack的配置，我这里也就是再vue.config.js里面配置，除了端口号以外，需要允许跨域，需要设置静态资源的路径
`
const packageName = require('./package.json').name;
module.exports = {
devServer: {
port: '8082',
headers: {
'Access-Control-Allow-Origin': '*',
},
},
publicPath: process.env.NODE_ENV === "production" ? '//qiankun.umijs.org/' : //localhost:8082,
configureWebpack: {
output: {
library: ${packageName}-[name],
libraryTarget: 'umd',
jsonpFunction: webpackJsonp_${packageName},
},
},
}
`
总结： 第一时间官网问题中查
- Application died in status NOT_MOUNTED: Target container with #container not existed while xxx loading!:
基本都是基座的问题，查路径查路由对不对，查页面上是不是存在这个容器
2.图片渲染不出来 静态资源拿不到 404：
webpack改改配置（关键字publicPath ， output），vue脚手架搭的就改改vue.config.js
其实代码官网基本都有，我也就是简单搭了个，问题没深究，本身就不太乐意捣鼓这些，但微前端的项目意义很大，就想试试，文笔拙劣，但还是希望转载借鉴标明出处（如果有的话）：https://home.cnblogs.com/u/xlno/