微前端:qiankun項目搭建

什么是微前端

微前端是一種多個團隊通過獨立發布功能的方式來共同構建現代化 web 應用的技術手段及方法策略。

微前端項目搭建流程

本文主要記錄qiankunvue-template相結合實現微服務框架過程。參考文檔涉及 qiankun-TMVCqiankunelement-uivue-element-admin

1、乾坤
qiankun 是一個基于 single-spa微前端實現庫,旨在幫助大家能更簡單、無痛的構建一個生產可用微前端架構系統。

2、vue-template
是用于后臺前端解決的方案。它基于vue并使用element-ui,借鑒vue-element-admin前端解決方案。

項目結構

項目文件 技術棧 框架 備注
micro-mian vue.js、qiankun vue-template 主應用
micro-son vue.js vue-template 子應用

注意:需要本地安裝有node與npm/yarn環境

微前端基座-主應用

基座是微前端項目的主應用,主要用于左側導航欄和右側內容展示、隱藏,具體配置流程如下:

1、注入依賴

主應用使用vue-template作為基礎框架, 注入qiankun、 tmvc-base 依賴,這里需要注意qiankun版本,采用2.x以上版本。
使用命令行安裝qiankun依賴:

npm install qiankun

安裝tmvc-base依賴:

npm install tmvc-base

或是在package.json配置文件按照對應依賴:

"qiankun": "^2.4.4",
"tmvc-base": "^1.0.6",

package.json配置文件

2、配置子應用路由文件

導入子應用路由配置文件至src目錄下,復制microRouter文件夾到src目錄下,需要根據自己的項目做些更改。
下載地址:基座路由文件microRouter

microRouter配置

microRouter->config.json代碼如下:

{
  "development": {
    "VUE_ELEMENTUI_ADMIN": "http://localhost:8098",
    "VUE_SON_APP":"http://localhost:8098,
    "TAMIL_APP":"http://localhost:8098"
  },
  "production": {
    "VUE_ELEMENTUI_ADMIN": "http://localhost:8098",
    "VUE_SON_APP":"http://localhost:8098",
    "TAMIL_APP":"http://localhost:8098"
  }
}

microRouter->index.js文件內容的name與activeRule的名稱必須一致,代碼如下:

// 配置子應用訪問地址
import envConfig from './config.json'
// 使用 NODE_ENV 區分不同環境,默認值為 
const ENV = process.env.NODE_ENV || 'development'development
const config = envConfig[ENV]
const {
  VUE_SON_APP
} = config
export default [
  /**
   * name: 微應用名稱 - 具有唯一性,為了方便區分,采取和子應用名稱
   * entry: 微應用入口 - 通過該地址加載微應用
   * container: 微應用掛載節點 - 微應用加載完成后將掛載在該節點上
   * activeRule: 微應用觸發的路由規則 - 觸發路由規則后將加載該微應用
   */
  {
    name: 'micro_son',
    entry: VUE_SON_APP,
    container: '#Appmicro',
    activeRule: '#/micro_son'
  }
]

3、頁面節點掛載

在主內容區域(AppMain.vue)掛載子應用


添加子應用掛載節點

4、路由配置文件

在主應用修改路由配置文件,注入基座配置、子應用路由配置。
子應用路由配置文件下載地址:子應用路由文件

路由配置文件

子應用路由(src\router\modules\dist-menu.js)設置具體借鑒apps-menu.js。

對應的基座當中設置的子應用名稱,子應用路由配置必須與配置的microRouter.js當中的“name“對應起來。


子應用路由配置

子應用配置

子應用是以vue-elment框架為主,基于qiankun底層的微前端框架,進行了生命周期、通訊、依賴等一系列封裝,方便維護及快速注入到子應用。

1、注入依賴

命令行注入tmvc依賴

npm install tmvc

或是直接在package.json添加"tmvc": "1.0.16"

2、main.js 配置

在main.js文件中引入tmvc, 并且導出微應用生命周期,具體代碼如下:


main.js 配置
// 微前端配置文件注入
import tmvc from 'tmvc'
// name 導出微應用生命周期
const { bootstrap, mount, unmount } = tmvc.microMain()
export { bootstrap, mount, unmount }

3、vue.config.js 配置文件

需要在vue.config.js設置跨域處理,具體代碼如下:


vue.config.js 配置
// 微前端子項目配置注入
const { microConfig } = require('./src/microApp/micro-config.js')
module.exports.devServer.headers = { 
   // 配置跨域 必須
   // 由于qiankun內部請求都是fetch來請求資源,因此子應用必須容許跨域
  'Access-Control-Allow-Origin': '*'
}
// umd格式注入 必須module.exports.publicPath = `//localhost:${port}`
// 端口號配置 不是必須設置
module.exports.configureWebpack.output = microConfig

4、子應用配置

下載地址:micro-config.js

micro-config.js配置

5、隱藏導航菜單

每個獨立的子應用都有屬于自己的導航菜單,那么就需要我們注入子應用到主應用里時需要將導航菜單隱藏處理,根據public-path里取到的window.POWERED_BY_QIANKUN值判斷當前是否在微應用還是獨立運行,這里需做以下操作:

image.png

注意事項:
1、子應用中需要展示在主應用中的路由需要src\router和src\router\modules\dist-menu.js配置路徑一致。
2、測試\發版時需要注意src\microRouter\config.json下訪問路徑。
3、發版后涉及跨域問題,根據發版方式做不同的設置

Nginx配置

要求在服務器端的Nginx配置兩個不同的server,才能實現微前端作用。例如一個主應用為8089與其中一個微應用微應用綁定在9999服務端口下。
nginx配置供參考如下:
(1)主項目配置

 server {
  listen       8089;
  server_name  localhost;
  location / {
      root   /usr/local/index;
      index  index.html index.htm;
  }
  #error_page  404              /404.html;
  # redirect server error pages to the static page /50x.html
  #
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   html;
  }
 }

Jenkins 云發版配置

在app.js文件加入跨域配置

'use strict'

const express = require('express')
const path = require('path')

// Constants
const PORT = 8090
const HOST = '0.0.0.0'

// App
const app = express()
app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'OPTIONS,GET,POST,PUT,DELETE')
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With')
  if (req.method === 'OPTIONS') {
    return res.send(200)
  }
  next()
})
app.use(express.static(path.join(__dirname, 'dist')))

app.listen(PORT, HOST)
console.log(`Listening at port: ${PORT}`)
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容