微前端之三 Micro App (京东) 框架使用

最新推荐文章于 2024-06-10 18:30:10 发布

一锦一瑟思华年

最新推荐文章于 2024-06-10 18:30:10 发布

阅读量2.2k

点赞数 4

分类专栏：微前端文章标签：前端 vue.js javascript 前端框架

本文链接：https://blog.csdn.net/tonyblog/article/details/129933234

版权

本文介绍了在不大幅度增加工作量的情况下，选择京东Micro App框架进行前端框架升级的理由，并详细阐述了如何搭建基座应用与子应用的结构，包括安装依赖、配置主入口、设置路由、创建子应用页面以及实现基座向子应用发送消息的功能。

摘要由CSDN通过智能技术生成

前面已经对微前端的定义优缺点，常用框架做了对比，如果是在对现有项目的框架升级，但是工作量要降到最低的前提下，我建议采用京东的Micro App框架或者是腾讯的wujie。但鉴于腾讯的wujie官方文档极少，在这里我将以京东的Micro App框架作为应用讲解。

项目结构讲解：

主要分为基座应用、子应用，其中基座应用跟子应用的关系是1：n。

首先，我们新建一个main_apps 的vue应用作为基座应用，然后分别新建child_apps1子应用1跟child_apps2子应用2，当然也可以新建更多的子应用，在这里就不多做讲解了。

1.安装依赖

npm i @micro-zoe/micro-app --save

2.在main.js 入口处引用(引入)

配置主入口页面为App

import Vue from 'vue'
import App from './App.vue'
import routes from './router'
import VueRouter from 'vue-router'
import microApp from '@micro-zoe/micro-app'

Vue.config.productionTip = false

microApp.start()

const router = new VueRouter({
  mode: 'history',
  // 设置主应用基础路由为main-vue(用于后续部署)，则子应用基础路由(baseroute)为/main-vue/xxx
  base: process.env.BASE_URL,
  routes,
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3.config.js 常用地址配置


// 开发环境地址
const config = {
  appvue1: 'http://localhost:4007',
  appvue2: 'http://localhost:4008',
  furnaceWeb: 'http://localhost:4010',
}

// 线上环境地址
if (process.env.NODE_ENV === 'production') {
  // 基座应用和子应用部署在同一个域名下，这里使用location.origin进行补全
  Object.keys(config).forEach((key) => {
    config[key] = window.location.origin
  })
}

export default config

4.router.js 分配子应用程序的路由信息

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./pages/home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
  },
  {
    path: "/app-vue1/*", //匹配 micro-app baseroute 路由，这样操作就可以使 当前路由定位到子应用的首页去
    name: "app-vue1",
    component: ()