vue+Microapp实现微前端

本文实现的是vite+vue3+Microapp为主应用，vue2+element为子应用的微前端

一、创建项目

1. 创建vite+vue3+Microapp主应用：

# 全局安装vite
npm install -g vite

# 指定目录，创建vite+vue3+Microapp主应用
cd your-project-directory
vite create my-microapp --template vue-ts

2. 创建vue2+element子应用：

# 全局安装vue-cli
npm install -g vue-cli

# 使用vue2-cli创建vue2+element子应用
vue create my-subapp

注意：子应用中应使用vue2来开发，因为vue2和vue3不兼容。

二、配置主应用

1. 安装micro-app：

yarn add micro-app

2. 修改App.vue：

<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>

三、配置子应用

1. 安装micro-app：

yarn add micro-app

2. 在main.js中注册子应用：

import { registerMicroApps, start } from "micro-app";

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

start();

四、启动项目

1. 启动vite+vue3+Microapp主应用：

cd my-microapp
yarn dev

2. 启动vue2+element子应用：

cd my-subapp
npm run serve

五、打包部署发布

1. 分别打包vite+vue3+Microapp主应用和vue2+element子应用：

cd my-microapp
yarn build

cd my-subapp
npm run build

2. 部署发布时，可以将vite+vue3+Microapp主应用和vue2+element子应用分别部署在不同的服务器上，并在主应用中配置子应用的地址，然后就可以访问微前端系统了。

注意：微前端应用部署后，要确保子应用的静态资源能够被正确加载。如果主应用和子应用使用域名不同，那么需要配置跨域地址。