Vue+Microapp实现微前端的示例详解

# 全局安装vite
npm install -g vite
# 指定目录，创建vite+vue3+Microapp主应用
cd your-project-directory
vite create my-microapp --template vue-ts

# 全局安装vue-cli
npm install -g vue-cli
# 使用vue2-cli创建vue2+element子应用
vue create my-subapp

yarn add micro-app

<template>
  <div>
    <h1>Microapp - Vue3 Main</h1>
    <div style="display: flex;justify-content: space-between;">
      <div style="width: 196px;height: 800px;padding: 20px;background: #eee;">
        <router-link to="/">Home</router-link>
        <br>
        <router-link to="/about">About</router-link>
        <br>
        <div id="subapp-container"></div>
      </div>
      <router-view/>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { registerMicroApps, start } from "micro-app";
@Component({})
export default class App extends Vue {
  mounted() {
    // 注册子应用
    registerMicroApps([
      {
        name: "subapp1",
        entry: "//localhost:3001",
        container: "#subapp-container",
        activePath: "/subapp",
      },
    ]);
    // 启动微前端
    start({ mode: "history" });
  }
}
</script>

yarn add micro-app

import { registerMicroApps, start } from "micro-app";
registerMicroApps([
  // 添加一个主应用地址，使子应用可以选择返回到主应用
  {
    name: "main-app",
    entry: "//localhost:3000",
    container: "#subapp-container",
    activePath: "/",
  },
]);
start();

cd my-microapp
yarn dev

cd my-subapp
npm run serve

cd my-microapp
yarn build
cd my-subapp
npm run build