基於 Vue CSR 的微前端實現方案

在這裏就不講微前端的各類優缺點，直接假設你在負責一箇中後臺管理系統的開發，全部的業務模塊所有都在一個項目中打包，隨着業務量的不斷增加，編譯愈來愈慢，你指望能夠從老的項目中將新的業務進行獨立開發、獨立部署，以微應用的形式嵌入到老項目中。

本篇文章的受衆是那些但願在新老的項目中，在不須要你對老項目進行改動老項目的前提下，嵌入微應用，若是本篇文章對你有幫助，請點個👍！

核心要素

• 構建生產環境代碼，輸出遠程組件所需的 JSON
• 經過 ajax 請求，拿到這個 JSON 的數據，傳給 遠程組件

新項目的搭建

對於項目的搭建，在這裏就再也不仔細的展開講了，你們直接看Genesis項目快速開始的文檔吧

修改編譯代碼

import path from 'path';
import fs from 'fs';
import { Build } from '@fmfe/genesis-compiler';
import { ssr } from './genesis';

const start = async () => {
    /** * 建立一個編譯實例 */
    const build = new Build(ssr);
    /** * 開始執行編譯程序，構建生產環境應用包 */
    await build.start();
    /** * 編譯完成後，建立一個渲染器，輸出遠程組件所需的內容 */
    const renderer = ssr.createRenderer();
    /** * CSR 渲染輸出 JSON */
    const result = await renderer.render({ mode: 'csr-json' });
    /** * 將 JSON 保存到客戶端目錄 */
    fs.writeFileSync(
        path.resolve(ssr.outputDirInClient, 'app.json'),
        JSON.stringify(result.data, null, 4),
        'utf8'
    );
};
start();

複製代碼

若是你是根據官方文檔來走的話，你只須要本身修改一下 genesis.build.ts 文件便可。若是你自定義了文件名，只要在 await build.start() 方法執行完成後，建立一個渲染器，將 CSR 的渲染結果保存到一個 JSON 文件便可。

編譯完成後，你獲得的大概是這樣的一個文件

你只須要將 client 目錄的靜態文件部署到你的服務器便可。

老項目遠程組件加載

假設你的靜態資源的基本路徑是 /ssr-genesis/，那麼你就能夠經過 /ssr-genesis/app.json 訪問到這個文件。

在你的老項目上安裝遠程組件

npm install @fmfe/genesis-remote axios
複製代碼

在你對應的路由上，使用遠程組件，加載此組件便可。

<template>
    <div class="app">
        <RemoteView :fetch="fetch" />
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import axios from 'axios';
import { RemoteView } from '@fmfe/genesis-remote';

export default Vue.extend({
    components: {
        RemoteView
    },
    methods: {
        async fetch() {
            const res = await axios.get('/ssr-genesis/app.json');
            if (res.status === 200) {
                return res.data;
            }
            return null;
        }
    }
});
</script>
複製代碼

多歷史模式的支持

若是你老項目使用歷史模式，在子應用也使用歷史模式，會致使 router.push('/xxx') 產生多條歷史記錄，爲了解決這個問題，你能夠在子應用使用 abstract 模式，或者使用 @fmfe/genesis-app 幫你處理多個 Router 實例使用歷史模式產生的BUG，注意，你須要在新老項目一塊兒使用 @fmfe/genesis-app 包裝後的 Router

拓展

/** * CSR 渲染輸出 HTML */
const result = await renderer.render({ mode: 'csr-html' });
/** * 將 html 保存到客戶端目錄 */
fs.writeFileSync(
    path.resolve(ssr.outputDirInClient, 'index.html'),
    result.data
    'utf8'
);
複製代碼

若是你僅僅只是想作 CSR 的項目，只須要渲染出 html 便可，和日常的 CSR 項目同樣，將 client 目錄部署到服務器。

總結

Genesis 只是一個 Vue SSR 的渲染庫，它不是框架，它只是給你提供了最基礎的 SSR 渲染能力。