基于Vue CSR的微前端实现方案实践

import path from 'path';
import fs from 'fs';
import { Build } from '@fmfe/genesis-piler';
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();

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({
 ponents: {
  RemoteView
 },
 methods: {
  async fetch() {
   const res = await axios.get('/ssr-genesis/app.json');
   if (res.status === 200) {
    return res.data;
   }
   return null;
  }
 }
});
</script>

/
  CSR 渲染输出 HTML
 /
const result = await renderer.render({ mode: 'csr-html' });
/
  将 html 保存到客户端目录
 /
fs.writeFileSync(
 path.resolve(ssr.outputDirInClient, 'index.html'),
 result.data
 'utf8'
);