1、概述由于项目是基于vue-cli4改造的，所以webpack相关配置我们就在vue.config.js里操刀，没有该文件的直接在项目根目录新建vue.config.js即可，具体配置api参考官方文档2、process.env先说一下这个，因为后面会用到这里存储的变量值。 在系列文章上一篇中说到了.env文件，里面定义的变量会自动加入到process.env变量中，这里再简单说明一下，先看目录
转载
2024-10-14 12:41:06
376阅读
目录一.整体项目准备二.基座应用搭建三.子应用配置数据传递及项目管理命令待更新一.整体项目准备安装 npm run all 方便后面的开发和代码处理npm i npm-run-all其他命令之后在写 二.基座应用搭建我们要拉一个基座项目进来, 为了后期修改方便,我这里的基座应用本身也是个单独项目用引入子仓库的方法引入进来那就copy一下我之前vite-vue3项目教程里的代码拉
注意：qiankun 属于无侵入性的微前端框架，对主应用基座和微应用的技术栈都没有要求。构建主应用基座我们先使用 vue-cli 生成一个 Vue 的项目，初始化主应用。将普通的项目改造成 qiankun 主应用基座，需要进行三步操作：创建微应用容器 - 用于承载微应用，渲染显示微应用；注册微应用 - 设置微应用激活条件，微应用地址等等；启动 qiankun；创建微应用容器我们先在主应用中创建微应
转载
2024-10-14 09:49:52
905阅读
前端开发者必备的 Nginx 知识nginx在应用程序中的作用解决跨域请求过滤配置gzip负载均衡静态资源服务器nginx是一个高性能的HTTP和反向代理服务器，也是一个通用的TCP/UDP代理服务器，最初由俄罗斯人Igor Sysoev编写。nginx现在几乎是众多大型网站的必用技术，大多数情况下，我们不需要亲自去配置它，但是了解它在应用程序中所担任的角色，以及如何解决这些问题是非常必要的。下面
qiankun文档: 快速上手微前端 : 是最近一年国内前端领域被频繁提及的关键字，虽然它并不是一个全新的领域/技术，但很显然在当今越来越多的前端应用即将步入第 3 个、第 5 个甚至更久的年头的背景下，如何给 巨石应用/遗产应用 注入新鲜的技术血液已经成为我们不得不正视的问题，而微前端正是解决这类问题的一个非常合适的解决方案。qiankun : 是一个生产可用的微前端框架，它基于 si
转载
2024-03-25 23:10:37
51阅读
微前端概述微前端概念是从微服务概念扩展而来的，摒弃大型单体方式，将前端整体分解为小而简单的块，这些块可以独立开发、测试和部署，同时仍然聚合为一个产品出现在客户面前。可以理解微前端是一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。微前端不是一门具体的技术，而是整合了技术、策略和方法，可能会以脚手架、辅助插件和规范约束这种生态圈形式展示出来，是一种宏观上的架构。这种架构目前有多种方案，都有
在公司里面，一般团队都是按照业务划分的，在没有微前端的时候，如果几个团队维护一个项目肯定会遇到一些冲突，比如合并代码的
原创
2024-09-05 10:10:17
2039阅读
qiankun框架的底层原理现在我们手写一个简易的qiankun框架，实现基础的父应用中切换路径跳转子应用、沙箱隔离等qiankun框架的功能。我们在已经配置好的qiankun主应用中不使用qinakun框架，而是引入我们自己手写的简易框架来实现本有的qiankun框架功能比如路由跳转、沙箱隔离、css样式隔离等。// 引入qinakun框架内的方法
// import { registerMic
转载
2024-04-14 16:07:04
429阅读
本文主要通过对微前端框架single-spa的基座应用加载子应用的single-spa-vue函数库进行分析，通过代码维度分析让大家了解在single-spa加载子应用的时候都做了哪些事情。如何通过优化single-spa-vue函数库保持子应用的状态。
作者：京东物流 宁冲1 前言什么是微前端？
微前端是指存在于浏览器中的微服务。本文主要通过对微前端框架s
转载
2024-05-17 18:08:10
57阅读
一、微前端基本概念概念：微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。核心目标：微前端的核心目标是将巨石应用拆解成若干可自治的松耦合微应用。应用场景
转载
2023-12-03 11:41:27
357阅读
点赞
Nginx是一个轻量级并有着高性能的http和反向代理服务器，它对高并发静态内容的请求有着高效的处理性能。采用epoll属于非阻塞过程调用模型，一个工作进程可以响应多个请求。  
❝
解决拖延症分四步
把大目标化整为零
清空桌面
行动起来
及时奖励
❞大家好，我是柒八九。今天我们来谈谈一个比较时髦的概念- 「微前端」。「微前端」是一套用于「组织大型前端应用的指导规范」。是受后端「微服务」启发而发展而来。虽然微前端是一个备受关注的趋势性话题，但其中有一些概念是很难准确定位的。
微前端实现原理研究总结前言微前端实现方案子应用生命周期改写子应用子应用打包主应用中注册子应用主应用和子应用的路由模式主应用路由拦截主应用获取子应用并执行生命周期函数主应用加载并解析子应用获取html文件内容解析html内容获取javascript文件内容html文件内容添加到子应用容器中执行 js 代码常规 diff 对比proxy沙箱环境执行 js 代码css 样式隔离css moduless
转载
2024-03-16 17:16:43
140阅读
什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。、微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。微前端架构具备以下几个核心价值：技术栈无关 主框架不限制接入
转载
2024-03-04 21:15:44
302阅读
目录微前端是什么大规模 Web 应用的困局传统 Web 应用的利与弊背景和意义总结 微前端是什么微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。微前端诞生在两个大的背景下，在提倡拥抱变化的前端社区可以看到新的框架、技术、概念层出不穷，并且随着 Web 标准的演进，
转载
2024-05-15 10:32:47
60阅读
主应用1. 引入并注册import { registerMicroApps, start } from 'qiankun'
// 注册微应用
registerMicroApps([
{
name: 'thd-psy-web',
entry: '/thd-sz-web/child/thd-psy-web/',
container: '#thd-psy-web',
转载
2024-01-17 15:13:37
225阅读
微前端架构就是将一个大型前端应用拆分成多个小的前端应用,每个应用都有自己独立的技术栈,独立开发和部署,最后通过一定的机制组合成完整的应用。设计与实施技术栈选型:每个微应用可以选择自己的技术栈,如React、Vue或Angular等。开发环境:每个微应用都有自己独立的开发环境,独立编译和打包。构建流程:利用Webpack 5的Module Federation或复用插件进行微应用构建。构建后输出到不
转载
2024-01-26 07:12:14
72阅读
前言由于最近作者在学习微前端，web component也是其中一大特性，部分微前端框架使用到，也是深入学习了一下相关的知识，分享出来。Web Component是什么？Web Component 实际上一系列技术的组合，主要包含 3 部分：自定义元素。 在 HTML 基础标签外扩展自定义标签元素，也就是我们平时使用框架的"组件"；Shadow DOM。 主要用于将 Shadow DOM 的内容与
随着移动互联网的发展和越来越多创业公司的加入，Web前端工程师的岗位空缺越来越大，薪资迅速上涨。Web前端工程师比以往更具有号召力。想要自学成为炙手可热的Web前端工程师？靠零碎化的短视频可不行，你需要更加对症下药的体系化好课程——WEB课程视频教程 ，为想要自学成才的Web前端新星们献上一套完整的自学课程，此次课程包含了10个阶段全套的在线课程，同时提供了视频和源代码的mian fei下载。从w
webpack 5 模块联邦实现微前端疑难问题解决说明webpack 5 新增 Module Federation（模块联邦）功能，他可以帮助将多个独立的构建组成一个应用程序，不同的构建可以独立的开发与部署。借助模块联邦我们可以一定程度的实现微前端概念1. 什么是微前端？微前端将微服务理念扩展到前端开发，一般来讲一个微服务架构中会有多个后端团队开发不同的业务服务，而前端通常只有一个团队，集中维护一
