日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

導(dǎo)語(yǔ)

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到仁和網(wǎng)站設(shè)計(jì)與仁和網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋仁和地區(qū)。

最近在做微前端的項(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ù) 

 
 
 

  
  
  
import { 
  
  
  
  registerMicroApps,  
  
  
  
  setDefaultMountApp,  
  
  
  
  start  
  
  
  
} from "qiankun"; 
 
 
 

封裝 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 = { 
  
  
  
 ![](https://user-gold-cdn.xitu.io/2020/4/27/171bbc5de042ec98?w=1811&h=959&f=gif&s=4951066)  
  
  
  
  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)備的 展示元素 

子應(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 from './router' //將路由信息導(dǎo)出方便使用   
  
  
  
let router = null;  
  
  
  
let instance = null;  
  
  
  
function render(props = {}) {  
  
  
  
  const { container } = props;  
  
  
  
  router = new VueRouter({  
  
  
  
    base: window.__POWERED_BY_QIANKUN__ ? '/star' : '/',    
  
  
  
    mode: 'history',  
  
  
  
    routes,  
  
  
  
  });  
  
  
  
  instance = new Vue({  
  
  
  
    router,  
  
  
  
    store,  
  
  
  
    render: h => h(App),  
  
  
  
  }).$mount(container ? container.querySelector('#app') : '#app');  
  
  
  
}  
  
  
  
if (!window.__POWERED_BY_QIANKUN__) {  
  
  
  
  render();  
  
  
  
}  
  
  
  
export async function bootstrap() {  
  
  
  
  console.log('[vue] vue app bootstraped');  
  
  
  
}  
  
  
  
export async function mount(props) {  
  
  
  
 //props 包含主應(yīng)用傳遞的參數(shù)  也包括為子應(yīng)用 創(chuàng)建的節(jié)點(diǎn)信息  
  
  
  
  console.log(props)  
  
  
  
  render(props);  
  
  
  
}  
  
  
  
export async function unmount() {  
  
  
  
  instance.$destroy();  
  
  
  
  instance = null;  
  
  
  
  router = null;  
  
  
  
} 
 
 
 

配置微應(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 (window.__POWERED_BY_QIANKUN__) {   
  
  
  
//處理資源  
  
  
  
 __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;   
  
  
  
} 
 
 
 

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

配置 vue.config.js 

 
 
 

  
  
  
module.exports = {  
  
  
  
  publicPath:`//localhost:${port}`,  
  
  
  
} 
 
 
 

vue.config.js 完整配置 

 
 
 

  
  
  
const path = require('path');  
  
  
  
const packageName = require('./package').name;  
  
  
  
function resolve(dir) {  
  
  
  
  return path.join(__dirname, dir);  
  
  
  
}  
  
  
  
const port = 7101; // dev port  
  
  
  
module.exports = {  
  
  
  
  publicPath:`//localhost:${port}`,  
  
  
  
  outputDir: 'dist',  
  
  
  
  assetsDir: 'static',  
  
  
  
  filenameHashing: true,  
  
  
  
  devServer: {  
  
  
  
    // host: '0.0.0.0',  
  
  
  
    hot: true,  
  
  
  
    historyApiFallback: true,//添加 重點(diǎn)  
  
  
  
    port,  
  
  
  
    overlay: {  
  
  
  
      warnings: false, 
  
  
  
      errors: true,  
  
  
  
    },  
  
  
  
    headers: {  
  
  
  
      'Access-Control-Allow-Origin': '*',  
  
  
  
    }, 
  
  
  
  },  
  
  
  
  configureWebpack: {  
  
  
  
    resolve: {  
  
  
  
      alias: {  
  
  
  
        '@': resolve('src'),  
  
  
  
      },  
  
  
  
    },  
  
  
  
    output: {  
  
  
  
      library: `${packageName}-[name]`,  
  
  
  
      libraryTarget: 'umd',  
  
  
  
      jsonpFunction: `webpackJsonp_${packageName}`,  
  
  
  
    },  
  
  
  
  },  
  
  
  
}; 
 
 
 

踩坑記錄

當(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)用配置 上文有提到  主要代碼 截取 

 
 
 

  
  
  
instance = new Vue({  
  
  
  
   router,  
  
  
  
   store,  
  
  
  
   render: h => h(App),  
  
  
  
 }).$mount(container ? container.querySelector('#app') : '#app'); //重點(diǎn) 
 
 
 

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

效果圖

寫到這里,項(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)題 

分享名稱：微前端qiankun項(xiàng)目實(shí)踐
當(dāng)前路徑：http://www.5511xx.com/article/dpgciio.html