SoFunction
Updated on 2025-04-05

Detailed explanation of the example of Vue+Microapp implementing micro front-end

1. Create a project

1. Create a vite+vue3+Microapp main application:

# Install vite globallynpm install -g vite
# Specify the directory and create vite+vue3+Microapp main applicationcd your-project-directory
vite create my-microapp --template vue-ts

2. Create a vue2+element sub-app:

# Install vue-cli globallynpm install -g vue-cli
# Create vue2+element sub-app using vue2-clivue create my-subapp

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

2. Configure the main application

1. Install micro-app:

yarn add micro-app

2. Modify:

<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 ></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() {
    // Register sub-app    registerMicroApps([
      {
        name: "subapp1",
        entry: "//localhost:3001",
        container: "#subapp-container",
        activePath: "/subapp",
      },
    ]);
    // Start the micro front end    start({ mode: "history" });
  }
}
</script>

3. Configure sub-application

1. Install micro-app:

yarn add micro-app

2. Register sub-application in:

import { registerMicroApps, start } from "micro-app";
registerMicroApps([
  // Add a main application address so that the sub-app can choose to return to the main application  {
    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-app respectively:

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

2. When deploying and publishing, the vite+vue3+Microapp main application and vue2+element sub-app can be deployed on different servers, and the sub-app addresses are configured in the main application, and then you can access the micro front-end system.

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

This is the end of this article about the detailed explanation of the examples of Vue+Microapp implementing micro front-end content. For more related content on Vue Microapp micro front-end, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!