前端开发者必备的 Nginx 知识nginx在应用程序中的作用解决跨域请求过滤配置gzip负载均衡静态资源服务器nginx是一个高性能的HTTP和反向代理服务器，也是一个通用的TCP/UDP代理服务器，最初由俄罗斯人Igor Sysoev编写。nginx现在几乎是众多大型网站的必用技术，大多数情况下，我们不需要亲自去配置它，但是了解它在应用程序中所担任的角色，以及如何解决这些问题是非常必要的。下面
注意：qiankun 属于无侵入性的微前端框架，对主应用基座和微应用的技术栈都没有要求。构建主应用基座我们先使用 vue-cli 生成一个 Vue 的项目，初始化主应用。将普通的项目改造成 qiankun 主应用基座，需要进行三步操作：创建微应用容器 - 用于承载微应用，渲染显示微应用；注册微应用 - 设置微应用激活条件，微应用地址等等；启动 qiankun；创建微应用容器我们先在主应用中创建微应
转载
2024-10-14 09:49:52
905阅读
目录一.整体项目准备二.基座应用搭建三.子应用配置数据传递及项目管理命令待更新一.整体项目准备安装 npm run all 方便后面的开发和代码处理npm i npm-run-all其他命令之后在写 二.基座应用搭建我们要拉一个基座项目进来, 为了后期修改方便,我这里的基座应用本身也是个单独项目用引入子仓库的方法引入进来那就copy一下我之前vite-vue3项目教程里的代码拉
微前端概述微前端概念是从微服务概念扩展而来的，摒弃大型单体方式，将前端整体分解为小而简单的块，这些块可以独立开发、测试和部署，同时仍然聚合为一个产品出现在客户面前。可以理解微前端是一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。微前端不是一门具体的技术，而是整合了技术、策略和方法，可能会以脚手架、辅助插件和规范约束这种生态圈形式展示出来，是一种宏观上的架构。这种架构目前有多种方案，都有
1、概述由于项目是基于vue-cli4改造的，所以webpack相关配置我们就在vue.config.js里操刀，没有该文件的直接在项目根目录新建vue.config.js即可，具体配置api参考官方文档2、process.env先说一下这个，因为后面会用到这里存储的变量值。 在系列文章上一篇中说到了.env文件，里面定义的变量会自动加入到process.env变量中，这里再简单说明一下，先看目录
转载
2024-10-14 12:41:06
376阅读
qiankun文档: 快速上手微前端 : 是最近一年国内前端领域被频繁提及的关键字，虽然它并不是一个全新的领域/技术，但很显然在当今越来越多的前端应用即将步入第 3 个、第 5 个甚至更久的年头的背景下，如何给 巨石应用/遗产应用 注入新鲜的技术血液已经成为我们不得不正视的问题，而微前端正是解决这类问题的一个非常合适的解决方案。qiankun : 是一个生产可用的微前端框架，它基于 si
转载
2024-03-25 23:10:37
51阅读
微前端实现原理研究总结前言微前端实现方案子应用生命周期改写子应用子应用打包主应用中注册子应用主应用和子应用的路由模式主应用路由拦截主应用获取子应用并执行生命周期函数主应用加载并解析子应用获取html文件内容解析html内容获取javascript文件内容html文件内容添加到子应用容器中执行 js 代码常规 diff 对比proxy沙箱环境执行 js 代码css 样式隔离css moduless
转载
2024-03-16 17:16:43
140阅读
主应用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阅读
在公司里面，一般团队都是按照业务划分的，在没有微前端的时候，如果几个团队维护一个项目肯定会遇到一些冲突，比如合并代码的
原创
2024-09-05 10:10:17
2039阅读
微前端项目在本地开发完成后，接下来就需要考虑如何部署上线。主应用和微应用都应该是独立开发和部署的，属于不同的仓库。 一、 部署在同一服务器 如果服务器数量有限，或不能跨域等原因需要把主应用和微应用部署在一起。 通常的做法是主应用部署在一级目录，微应用部署在二/三级目录。 1.1 微应用改造 由于微应 ...
转载
2021-08-18 17:43:00
2304阅读
3评论
qiankun框架的底层原理现在我们手写一个简易的qiankun框架，实现基础的父应用中切换路径跳转子应用、沙箱隔离等qiankun框架的功能。我们在已经配置好的qiankun主应用中不使用qinakun框架，而是引入我们自己手写的简易框架来实现本有的qiankun框架功能比如路由跳转、沙箱隔离、css样式隔离等。// 引入qinakun框架内的方法
// import { registerMic
转载
2024-04-14 16:07:04
429阅读
?前言在我们的日常开发中，经常会遇到这么一些业务需求，比如说：在一个项目中要放入两个完全不同类型的场景。基于这样的背景下，单页面应用显然已经不能在繁杂的业务中脱颖而出。因此，前端的流行趋势里也就有了微前端架构。这篇文章更像是一篇笔记，记录了我学习微前端的伊始。那在这里，可能会谈到为什么我会从之前的应用文到突然学起了这些架构内容呢？原因在于，周一在入厂后接触到了一系列超级先进的技术。微前端可能是我第
一、微前端基本概念概念：微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。核心目标：微前端的核心目标是将巨石应用拆解成若干可自治的松耦合微应用。应用场景
转载
2023-12-03 11:41:27
357阅读
点赞
Access-Control-Allow-Origin：跨域在服务端是不允许的。只能通过给Nginx配置Access-Control-Allow-Origin *后，才能使服务器能接受所有的请求源（Origin）
原创
2022-04-28 16:02:20
2745阅读
项目需要，申请了三台测试机器，好在测试机里面光秃秃的什么都没有，我就可以好好的学习一把玩一把了！接下来以图文的形式讲一下我所碰到的坑以及小小的收获吧！一、准备工作首先你得有一台可以玩的linux服务器，知道用户名和密码，然后你需要在windows电脑上安装两个可以连上linux服务器的工具，Xshell 5和Xftp 5，安装教程不多说，补图说明如何连上服务器： xshell连接界面如下，输入好
什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。、微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。微前端架构具备以下几个核心价值：技术栈无关 主框架不限制接入
转载
2024-03-04 21:15:44
306阅读
目录微前端是什么大规模 Web 应用的困局传统 Web 应用的利与弊背景和意义总结 微前端是什么微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。微前端诞生在两个大的背景下，在提倡拥抱变化的前端社区可以看到新的框架、技术、概念层出不穷，并且随着 Web 标准的演进，
转载
2024-05-15 10:32:47
60阅读
前言由于最近作者在学习微前端，web component也是其中一大特性，部分微前端框架使用到，也是深入学习了一下相关的知识，分享出来。Web Component是什么？Web Component 实际上一系列技术的组合，主要包含 3 部分：自定义元素。 在 HTML 基础标签外扩展自定义标签元素，也就是我们平时使用框架的"组件"；Shadow DOM。 主要用于将 Shadow DOM 的内容与
webpack 5 模块联邦实现微前端疑难问题解决说明webpack 5 新增 Module Federation（模块联邦）功能，他可以帮助将多个独立的构建组成一个应用程序，不同的构建可以独立的开发与部署。借助模块联邦我们可以一定程度的实现微前端概念1. 什么是微前端？微前端将微服务理念扩展到前端开发，一般来讲一个微服务架构中会有多个后端团队开发不同的业务服务，而前端通常只有一个团队，集中维护一
