Vue+Microapp implements micro front end

This article implements vite+vue3+Microapp as the main application, and vue2+element as the micro front end of the sub-application

1. Create a project

1. Create vite+vue3+Microapp main application:

# 全局安装vite
npm install -g vite

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

2. Create a vue2+element sub-application:

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

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

Note: Vue2 should be used for development in sub-apps, because vue2 and vue3 are not compatible.

2. Configure the main application

1. Install the micro-app:

yarn add micro-app

2. Modify 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>

3. Configure sub-applications

1. Install the micro-app:

yarn add micro-app

2. Register sub-applications in main.js:

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

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

start();

4. Start the project

1. Start the vite+vue3+Microapp main application:

cd my-microapp
yarn dev

2. Start the vue2+element sub-application:

cd my-subapp
npm run serve

5. Package deployment and release

1. Package vite+vue3+Microapp main application and vue2+element sub-application separately:

cd my-microapp
yarn build

cd my-subapp
npm run build

2. When deploying and publishing, you can deploy the main application of vite+vue3+Microapp and the sub-application of vue2+element on different servers, and configure the address of the sub-application in the main application, and then you can access the micro front-end system.

Note: After the micro-frontend application is deployed, ensure that the static resources of the sub-application can be loaded correctly. If the main application and the sub-application use different domain names, you need to configure a cross-domain address.