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子应用分别部署在不同的服务器上，并在主应用中配置子应用的地址，然后就可以访问微前端系统了。
注意：微前端应用部署后，要确保子应用的静态资源能够被正确加载。如果主应用和子应用使用域名不同，那么需要配置跨域地址。
到此这篇关于Vue+Microapp实现微前端的示例详解的文章就介绍到这了,更多相关Vue Microapp微前端内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！