微前端在Vue项目的实践

文章的参考：微前端在美团外卖的实践

我将讲解微前端如何在Vue项目中实践和应用，业务逻辑参考文中介绍的，文章中介绍的逻辑比较清晰，但是并没有提供过多的业务代码，对微前端如何应用到具体的项目我们就无从而知，为了介绍如何应用到项目中，我就写下了这篇文章，我们应用的工程是在Vue项目中。

如果你还不知道如何通过webpack配置Vue项目，请先参考这篇文章：自己搭建一个Vue项目工程

我的微前端项目是基于自己配置的webpack项目，不再使用Vue官方脚手架，因为生成出来的项目不服务我们的预期，比如有些要打包，有些不打包，等等。

如何使用

子工程：GitHub地址
基座工程：GitHub地址

基座工程和子工程启动命令都是yarn dev，两个工程必须都要启动，基座工程提供运行的环境，子工程负责打包自己的项目供外界访问，两个服务链接的桥梁是JSONP。

基座提供了一个注册子工程的入口文件：app.json

{"web": {"js": "http://localhost:9000/app.js"}
}

表示我们的子项目启动在http://localhost:9000/这个服务上，app.js表示子项目的入口文件，当访问到子工程的某个项目的时候，会发送一个JSONP请求到子工程服务器中，拿到对应的JS脚本执行即可，因为我们的微前端是基于路由划分的，（当然你也可以基于组件跟加细致的划分等等，但是对项目改动太大了，不适合已经开放了的项目），下面看加载子项目的代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import { handleRouter } from './generator'
import Store from '../store'
import jsonp from 'jsonp'
const subAppMapInfo = require('../../app.json')Vue.use(VueRouter)const routes = [{path: '/subapp',name: 'Home',component: Home},{path: '/',redirect: '/subapp'}
]const router = new VueRouter({mode: 'hash',base: process.env.BASE_URL,routes
})const subAppRoutes = {}router.beforeEach(function (to, from, next) {const { path } = to;const id = path.split('/')[2];const subAppModule = subAppMapInfo[id];if (subAppModule) {if (subAppRoutes[id]) {if (subAppRoutes[id].beforeEach) {let Route = routerRoute.handleRouter = handleRouterRoute.cacheRouter = routessubAppRoutes[id].beforeEach(to, from, next, Store, Route)} else {next()}} else {jsonp(subAppMapInfo[id].js, { timeout: 500 }, function (err, date) {if (err) {console.log(`${id}项目加载失败：`, err)next('/subapp')} else {let result = date()console.log(`${id}项目加载成功：`, result)// 加载路由subAppRoutes[id] = resultlet children = routes[0].childrenif (children) {routes[0].children = children.concat(handleRouter({name: id, router: result.router}))} else {routes[0].children = handleRouter({name: id, router: result.router})}router.addRoutes(routes)// 加载状态Store.registerModule(id, result.store)next({...to, replace:true})}})next()}} else {next()}
})export default router

JSONP获取之后会执行脚本，会传入一个registerApp函数，表示注册APP的函数，这个函数提供了当前APP需要的路由信息和状态容器，这个信息将会注册在基座工程里面，基座工程就会添加到基座工程的路由里面，就可以访问了。

import router from './router'
import store from './store'function registerApp () {return {router, // 子项目的routerstore, // 子项目的storebeforeEach (to, from, next) {next()}}
}try {// eslint-disable-next-line no-undef__jp0(registerApp, '将注册函数返回让外界调用')
} catch (error) {console.log(error)
}export default registerApp

大家还是参考代码实现把：

子工程：GitHub地址
基座工程：GitHub地址

微前端在Vue项目的实践相关推荐

【Vue基础】前端工程化Vue项目
一.创建Vue项目步骤 1.新建一个文件夹,起名为vue_project01 2.在该文件夹中打开cmd,输入指令vue ui,打开图形化界面 3.此时跳转到网页,根据以下步骤配置vue项目 1)项目 ...
【前端】Vue项目：旅游App-博客总结
博客链接 [前端]Vue项目:旅游App-(1)搭建项目.重置css.配置router和store(pinia) https://blog.csdn.net/karshey/article/deta ...
【前端】Vue项目：旅游App-（22）detail：房屋信息、房屋设施、插槽
文章目录目标过程与代码房屋信息部分info 相似结构的组件section 房屋设施facility 效果总代码修改或添加的文件 detail-section detail-facility ...
postmessage 游戏窗口内无效_前端的微前端在交通项目内的应用实践
项目背景业务的快速发展,越来越多的接入渠道(百度.快应用等等),人员增加,开发成本与管理成本都上升,效率反而越来越低,团队的人员重复造轮子,毫无挑战,当然市面上也有多端解决方案,但是不太适用目前的业 ...
基于京东micro-app微前端框架的项目实践
1.微前端应用介绍 1.1.微前端概念微前端的概念是由ThoughtWorks在2016年提出的,它借鉴了微服务的架构理念,核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用,每个应用都可以独 ...
微前端架构实现(项目引入，消息总线，构建部署，监听服务)
简介为了解决庞大的一整块后端服务带来的变更与扩展方面的限制,出现了微服务架构(Microservices): 微服务是面向服务架构(SOA)的一种变体,把应用程序设计成一系列松耦合的细粒度服务,并通 ...
微前端框架qiankun项目实战（一）--本地开发篇
❝ 作者:黑化程序员 https://juejin.cn/post/6970310177517993998 ❞ 大家好,我是小黑. 公司使用技术栈是vue,最近遇到了一个需求,要把原有后台管理系统的功 ...
微前端在美团外卖的实践
来自:美团技术团队微前端是微服务理念在前端的应用.之前美美给大家介绍过微前端在美团HR系统和美团闪购的实践文章. 今天的文章来自美团外卖广告团队,他们参考业界优秀方案,同时也深度结合了广告端实际业务 ...
【前端优化 Vue项目优化】如何避免浏览器卡顿，实现性能优化cdn？
提示:前端查漏补缺,仅代表个人观点. 文章目录一.前言二.前端优化方法 1. 减少请求,压缩文件 2. CSS和JavaScript管理 3. 设置内容缓存 4. 减少页面重定向 5. CDN网络 ...

微前端在Vue项目的实践

如何使用

微前端在Vue项目的实践相关推荐

最新文章

热门文章