(給前端大全加星標(biāo)，提升前端技能)

作者：zxh1307

https://juejin.im/post/5ea55417e51d4546e347fda9

導(dǎo)語(yǔ)

最近在做微前端的項(xiàng)目 , 過(guò)程中真是踩了不少坑 , 在有限的資料中不斷試錯(cuò) , 默默無(wú)語(yǔ)兩行淚 哈哈. ?在此次將踩坑部分都記錄下來(lái), 讓更多的人少走點(diǎn)彎路 , ? 此項(xiàng)目使用?螞蟻金服qiankun?為基礎(chǔ)作為開(kāi)發(fā) . 話不多說(shuō) 開(kāi)講 !!!

那什么是 qiankun 呢

qiankun 是一個(gè)基于 single-spa 的微前端實(shí)現(xiàn)庫(kù)，旨在幫助大家能更簡(jiǎn)單、無(wú)痛的構(gòu)建一個(gè)生產(chǎn)可用微前端架構(gòu)系統(tǒng)。

什么是微前端

微前端架構(gòu)具備以下幾個(gè)核心價(jià)值：

• 技術(shù)棧無(wú)關(guān)

  主框架不限制接入應(yīng)用的技術(shù)棧，微應(yīng)用具備完全自主權(quán)

• 獨(dú)立開(kāi)發(fā)、獨(dú)立部署

  微應(yīng)用倉(cāng)庫(kù)獨(dú)立，前后端可獨(dú)立開(kāi)發(fā)，部署完成后主框架自動(dòng)完成同步更新

• 增量升級(jí)

  在面對(duì)各種復(fù)雜場(chǎng)景時(shí)，我們通常很難對(duì)一個(gè)已經(jīng)存在的系統(tǒng)做全量的技術(shù)棧升級(jí)或重構(gòu)，而微前端是一種非常好的實(shí)施漸進(jìn)式重構(gòu)的手段和策略

• 獨(dú)立運(yùn)行時(shí)

  每個(gè)微應(yīng)用之間狀態(tài)隔離，運(yùn)行時(shí)狀態(tài)不共享

摘自 qiankun官方文檔

主應(yīng)用配置

此次項(xiàng)目 主應(yīng)用與 子應(yīng)用均為 vue ,

下載 qiankun

npm install qiankun

在主應(yīng)用中注冊(cè)微應(yīng)用

//?導(dǎo)入乾坤函數(shù)

封裝 render 方法

此方法在main.js 中要初始調(diào)用一次, 主要用來(lái)掛載主應(yīng)用 , 之后子應(yīng)用分別依次調(diào)用 ,所以故作判斷. 傳入的參數(shù)分別為 子應(yīng)用 的 HTML 和 加載狀態(tài)?content?字段 我們用 vuex 存儲(chǔ) 起來(lái),方便使用

let?app?=?null;

function?render({?appContent,?loading?})?{
??if?(!app)?{
????app?=?new?Vue({
??????router,
??????store,
??????render:?h?=>?h(App),
????}).$mount('#app');
????
??}?else?{
????store.commit('microApp/changeCenter',?appContent);
????store.commit('microApp/changeLoading',?loading);
??}

}

微應(yīng)用注冊(cè)

下文中的apps 可以為獲取后數(shù)據(jù)?, 注冊(cè)微應(yīng)用 本文案例比較簡(jiǎn)單,方便大家理解 ,

在注冊(cè)自應(yīng)用的參數(shù) ** container 與 render** 踩坑比較多,下邊會(huì)著重講解.

function?genActiveRule(routerPrefix)?{
??return?location?=>?location.pathname.startsWith(routerPrefix);
}

//傳遞給子應(yīng)用的數(shù)據(jù)
let?msg?=?{
??data:'修煉愛(ài)情的辛酸,學(xué)會(huì)放好以前的渴望'
}

let?apps?=?[
??{
????name:?'linjunjie',?
????entry:?'//localhost:215',??//?改成自己子應(yīng)用的端口號(hào)
????container:'#subView',?//節(jié)點(diǎn)?id???//??沙盒模式?
????//?render:render,??//?普通模式???
????activeRule:?genActiveRule('/star'),
????props:msg
??}
]
???//注冊(cè)的子應(yīng)用?參數(shù)為數(shù)組
registerMicroApps(apps,{
??beforeLoad:?[
????app?=>?{
??????console.log(app)
??????console.log('[LifeCycle]?before?load?%c%s',?'color:?green;',?app.name);
????},
??],
??beforeMount:?[
????app?=>?{
??????console.log('[LifeCycle]?before?mount?%c%s',?'color:?green;',?app.name);
????},
??],
??afterUnmount:?[
????app?=>?{
??????console.log('[LifeCycle]?after?unmount?%c%s',?'color:?green;',?app.name);
????},
??],
});


setDefaultMountApp('/star/linjunjie')

//開(kāi)啟沙盒模式
start({?
???sandbox?:{strictStyleIsolation:?true}
})

當(dāng)微應(yīng)用信息注冊(cè)完之后，一旦瀏覽器的 url 發(fā)生變化，便會(huì)自動(dòng)觸發(fā) qiankun 的匹配邏輯，所有 activeRule 規(guī)則匹配上的微應(yīng)用就會(huì)被插入到指定的 container 中，同時(shí)依次調(diào)用微應(yīng)用暴露出的生命周期鉤子。

主應(yīng)用為子應(yīng)用準(zhǔn)備的 展示元素

<div?id="app"><div?id="nav"><div?@click="onChangePage('/star/linjunjie')"?>林俊杰div><div?@click="onChangePage('/star/zhangyixin')"?>張藝興div>div><div?id="subView"?class="sub-content-wrap"?v-html="content">div>div>template><script>import?{?mapState?}?from?'vuex';export?default{
????data(){return?{
??????}
????},computed:{//獲取子應(yīng)用HTML?數(shù)據(jù)
???????...mapState('microApp',?['content']),
???????...mapState('microApp',?['mircoAppLoading']),
????},methods:{//定義跳轉(zhuǎn)方法
??????onChangePage(url){console.log(url)this.routerGo(url,?'我喜愛(ài)的男明星')
??????},
??????routerGo(href?=?'/',?title?=?null,?stateObj?=?{})?{window.history.pushState(stateObj,?title,?href);?
??????},
????}
?}script>

子應(yīng)用配置

關(guān)于子應(yīng)用的配置相對(duì)較簡(jiǎn)單 , 不需要額外下載qiankun 主要將生命鉤子 導(dǎo)出即可

導(dǎo)出響應(yīng)的生命鉤子

導(dǎo)出?bootstrap、mount、unmount?三個(gè)生命周期鉤子，以供主應(yīng)用在適當(dāng)?shù)臅r(shí)機(jī)調(diào)用。注意，實(shí)例化路由時(shí)，判斷當(dāng)運(yùn)行在qiankun環(huán)境時(shí)，路由要添加前綴，前綴與主應(yīng)用注冊(cè)子應(yīng)用函數(shù)genActiveRule("/subdemo")內(nèi)的參數(shù)一致

'star' 值需要與主應(yīng)用的值對(duì)應(yīng) genActiveRule("/star") 中的值需要商定好 主應(yīng)用與微應(yīng)用都要使用

如果 new VueRouter 不在main.js ?中 配置 ,請(qǐng)將此配置移動(dòng)到 main.js ?方便管理

import?routes?

配置微應(yīng)用的打包工具

除了代碼中暴露出相應(yīng)的生命周期鉤子之外，為了讓主應(yīng)用能正確識(shí)別微應(yīng)用暴露出來(lái)的一些信息，微應(yīng)用的打包工具需要在vue.config.js 中 增加如下配置:

const packageName = require('./package.json').name;

module.exports = {
output: {
library: `${packageName}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${packageName}`,
},
};

子應(yīng)用判斷

子應(yīng)用中新建 publicPath.js 在main.js 引入
if?(

處理 資源加載問(wèn)題

配置 vue.config.js

module.exports?=?{

vue.config.js 完整配置

const?path?=?

踩坑記錄

當(dāng)前頁(yè)面為子應(yīng)用時(shí), 刷新頁(yè)面404

以下方式均為主應(yīng)用配置

• 方式一 刪除 mode 配置項(xiàng)

  mode: 'history', // 將此配置代碼刪除
  

• 方式二 配置404 ?頁(yè)面

如果沒(méi)有注釋掉mode: 'history'??此參數(shù) 將404 頁(yè)面重新導(dǎo)向 ?home首頁(yè)

{
????path:?'*',
????name:?'indexNotFound',
????component:?resolve?=>?require(['@/components/home'],?resolve),
????children:?HomeChild,
},

子應(yīng)用 樣式隔離 開(kāi)始沙箱模式 遇到的問(wèn)題

• 主應(yīng)用配置sandbox :{strictStyleIsolation: true}渲染模式由 render 模式 改為 containercontainer:'#subView', 此時(shí) 子應(yīng)用的 掛載 dom ?為????謹(jǐn)記主 container :#+id

• 子應(yīng)用配置 上文有提到 ?主要代碼 截取

new?Vue({

遇到的問(wèn)題: 開(kāi)啟沙箱模式,如果是 采用 render 模式會(huì)報(bào)錯(cuò) ,故選擇container 模式

效果圖

寫(xiě)到這里,項(xiàng)目已經(jīng)構(gòu)建完成了 讓我們來(lái)看看效果吧

這里是完整代碼 方便大家學(xué)習(xí) 代碼github地址:https://github.com/zxh1307/qiankun-vue

項(xiàng)目問(wèn)題

• 為啥我項(xiàng)目啟動(dòng)后看不到子應(yīng)用的效果

  將master 主應(yīng)用 main.js 中 注冊(cè)的 子應(yīng)用的端口號(hào) 改成自己項(xiàng)目的端口號(hào)即可

結(jié)語(yǔ)

開(kāi)發(fā)中還有其他坑 忘記記錄了, 千萬(wàn)記得項(xiàng)目部署子應(yīng)用資源跨域的問(wèn)題 , 需要Nginx配置跨域問(wèn)題

推薦閱讀??點(diǎn)擊標(biāo)題可跳轉(zhuǎn)

萬(wàn)字解析微前端、微前端框架qiankun以及源碼

微前端框架是怎么導(dǎo)入加載子應(yīng)用的

了解什么是微前端

覺(jué)得本文對(duì)你有幫助？請(qǐng)分享給更多人

關(guān)注「前端大全」加星標(biāo)，提升前端技能

好文章，我在看??

總結(jié)

以上是生活随笔為你收集整理的py获取前端的参数_微前端 qiankun 项目实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。