什么是微前端
微前端是一種多個團隊通過獨立發布功能的方式來共同構建現代化 web 應用的技術手段及方法策略。
微前端項目搭建流程
本文主要記錄qiankun與vue-template相結合實現微服務框架過程。參考文檔涉及 qiankun-TMVC、qiankun、element-ui、vue-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",
2、配置子應用路由文件
導入子應用路由配置文件至src目錄下，復制microRouter文件夾到src目錄下，需要根據自己的項目做些更改。
下載地址：基座路由文件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, 并且導出微應用生命周期，具體代碼如下：
// 微前端配置文件注入
import tmvc from 'tmvc'
// name 導出微應用生命周期
const { bootstrap, mount, unmount } = tmvc.microMain()
export { bootstrap, mount, unmount }
3、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
5、隱藏導航菜單
每個獨立的子應用都有屬于自己的導航菜單，那么就需要我們注入子應用到主應用里時需要將導航菜單隱藏處理，根據public-path里取到的window.POWERED_BY_QIANKUN值判斷當前是否在微應用還是獨立運行，這里需做以下操作：
注意事項：
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}`)
