個人的淺薄理解，能幫助到你那就再好不過了
先用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/