微前端--无界方案之官网demo操作说明

最新推荐文章于 2025-10-27 18:13:16 发布
原创 最新推荐文章于 2025-10-27 18:13:16 发布 · 7.4k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #前端框架

本文介绍如何使用官方提供的无界微前端框架搭建个人项目，并解决跨域问题，实现不同前端框架间的路由配置与页面加载。

下载运行

deom下载

官方demo在GitHub（访问有问题，需要设置，本人未设置）

链接：https://github.com/Tencent/wujie （别处给的，也能用）

pnpm下载

其中的包需要通过pnpm下载，使用npm下载存在问题！！！

npm install pnpm -g

注：默认下载最新版pnpm，支持的node为14.6以上，以下版本请到pnpm官网找历史版本

运行

npm run start

出现一下界面，即为成功：

加入个人项目

创建项目

在examples中创建一个自己的项目（本人用的vue2，所以创建一个vue2的项目，其他类推）

注：主页面项目就是我们所有项目最终运行的地方，相当于main

最低0.47元/天 解锁文章
Jocks5
关注
Babylonjs 官网demo预览图合集整理 带说明
10-23 5290
整理一份官方demo预览图，方便看图时可以直接了解所运用的相关技术，部分带简略文字说明 可以从图片名称找到github内的源码， 或者添加前缀访问 https://www.babylonjs.com/demos/+图片名称 例如：https://www.babylonjs.com/demos/actions/ babylon官网 https://www.babylonjs.com/ 的源码可以从github下载 以下预览图为babylon官网部分demo https://gi...
图像分类篇：实现pytorch官网demo(LeNet)
weixin_44314290的博客
12-06 1327
跟着b站up主学习整理：2.1 pytorch官方demo(Lenet)_哔哩哔哩_bilibili 一、CNN的雏形——LeNet网络结构 1998年，LeCun等人发布了LeNet网络，从而揭开了深度学习的面纱，之后的深度神经网络都是在这个基础之上进行改进的，其结构如图所示。 如图，LeNet是由卷积层、池化层、全连接层的顺序连接，网络中的每个层使用一个可微分的函数将激活数据从一层传递到另一层。 pytorch 中 tensor（也就是输入输出层）的通道排序为：[batch, channe.
小米官网的小demo，比较完整的网页了，可以直接使用
01-04
复现一个小米官网，使用了bootstrap框架，已经是比较完整的网站页面了
无界微前端学习和使用
最新发布
代码哈士奇的博客
10-27 873
如果我们做B端，比如重构的时候，运行在新项目，但是新项目是需要时间来重构的，怎么办呢，按照官方说法，不推荐保活模式，推荐单例模式。新建一个文件夹wujie,执行下面的命令三次，主应用选择Vue,其他两个项目分别为vue和react。如果是新项目，且相当使用比较新的浏览器，可以考虑无界，开箱即用，当然无界也提供了兼容的。但是这里的话，在vue1这里，进入子应用About，刷新后会在vue子应用首页。子应用的宽高调整等等，但是最好判断下是不是无界启动，还是单独启动。和其他微前端技术一样，该有的都有。
腾讯无界前端微服务地址
liuxi_happy的博客
02-26 1476
https://wujie-micro.github.io/doc/
微前端（无界）
热门推荐
qq1195566313的博客
03-20 1万+
微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题，或无法提供支持。本文提供一种基于 iframe 的全新微前端方案，完善的解决了这些核心诉求。微前端概念微前端是借鉴了微服务的理念，将一个庞大的应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发，独立运行，独立部署，还可以随意组合，这样就降低了耦合度，从而更加灵活。微前端特性。
关于微前端，你想知道的都在这!
02-22 1754
微前端官网：https://micro-frontends.org/问题：如何实现多个应用之间的资源共享？之前比较多的处理方式是npm包形式抽离和引用，比如多个应用项目之间，可能有某业务逻辑模块或其他是可复用的，便抽离出来以npm包的形式进行管理和使用。发布效率低下：如果需要迭代npm包内的逻辑业务，需要先发布npm包之后，再每个使用了该npm包的应用都更新一次npm包版本，再各自构建发布一次，过程繁琐。如果涉及到的应用更多的话，花费的人力和精力就更多了。
微前端无界方案
michael的博客
05-13 4483
微前端无界方案
微前端从源码看无界：为何说它是 qiankun 的 “轻量化替代方案”
vv_bug
04-14 930
无界微前端（Wujie）是一款由腾讯团队开源的微前端框架，专注于解决复杂前端应用的模块化、子应用独立开发和部署等问题。它通过和Shadow DOM技术实现子应用的样式隔离和脚本沙箱，同时支持跨技术栈的无缝集成（如 React、Vue、Angular 等）。具体的特性跟使用就不详细说明了，小伙伴们可以自己查阅「无界」开发文档，今天我们主要是从源码角度去分析下无界微前端框架。
微前端之使用无界创建一个微前端项目
BradenHan的专栏
03-08 2463
主应用不限技术栈，只需引入 wujie、配置子应用路由并启动 wujie 即可。wujie 针对 React 和 Vue 框架分别提供了wujie-vue2wujie-vue3依赖。这里以 Vue2 为例。
微前端学习笔记(3):前端沙箱之JavaScript的sandbox（沙盒/沙箱）
周陆军的博客，分享it技术。
06-06 2086
多实例运行语法兼容不污染全局环境（主应用）❌❌❌✅❌✅❌✅❌iframe✅✅✅转载本站文章《微前端学习笔记(3):前端沙箱之JavaScript的sandbox（沙盒/沙箱）》,微前端学习笔记(3):前端沙箱之JavaScript的sandbox（沙盒/沙箱） - 前端架构设计 - 周陆军的个人网站。
前端网站常用的demo
11-04
这些例子都是自己在开发网站常用到的前端实例，其中包括轮播图，tab切换等实例例子，拿来即可使用，简单易懂
micro-frontends-framework:微前端架构demo(项目引入，消息总线，构建部署，监听服务)....
05-02
简介 为了解决庞大的一整块后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices）： 微服务是面向服务架构（SOA）的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来 具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每个服务都具有稳固的模块边界，甚至允许使用不同的编程语言来编写不同服务，也可以由不同的团队来管理 然而，越来越重的前端工程也面临同样的问题，自然地想到了将微服务思想应用（照搬）到前端，于是有了「微前端（micro-frontends）」的概念： 即，一种由独立交付的多个前端应用组成整体的架构风格。具体的，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品： 简单来说就是将一个巨无霸（Monolith）的前端工程拆分成一个一个的小工程 （主要是ToB业务
qiankun-demo:微前端
03-19
qiankun-demo:微前端
web前端demo
03-05
一个简单的前端demo 青春，一半明媚，一半忧伤。 它是一本惊天地泣鬼神的着作，而我们却读的太匆忙。 于不经意间，青春的书籍悄然合上，以至于我们要重新研读它时， 却发现青春的字迹早已落满尘埃，模糊不清
无界wujie网址
lyj168997的博客
12-18 1028
文档网址：微前端是什么 | 无界demo：https://wujie-micro.github.io/demo-main-vue/react17
创建spring springmvc和jdbc项目步骤详解
程序员小雨的博客
10-29 375
ssjdbc项目创建流程 1新建mavenweb项目 2导入依赖 spring springmvc mysql c3p0 jstl 3分包javaresources变蓝变红导入c3p0工具类 4配置文件 beans.xml中扫描service和dao springmvc.xml中三个操作 扫描controller 配置注解驱动 配置视图解析器 c3p0中配置数据库 web.xml中三个操作 配置springM...
微前端——无界wujie
lanmy_dl的博客
12-24 7503
1.全局安装2.使用pnpm -v可以查看版本号3.pnpm比npm的优势，在pnpm中文网的动机这样写pnpm官网简单来说就是，但有100个vue项目，每个项目都会去安装相应的依赖包，这样导致磁盘的缩小和安装速度慢（每次都会重新下载依赖包），很麻烦。但是pnpm使用软链接硬链接和仓库解决。
wujie 无界 微前端
u010707194的博客
04-17 4170
子应既没有设置为保活模式，也没有进行生命周期的改造则进入了重建模式，每次页面切换不仅会销毁承载子应用。预执行指的是在应用空闲的时候将子应用提前渲染出来，可以进一步提升子应用打开时间，只需要在。当子应用设置为保活模式，切换子应用后仍然可以保持子应用的状态和路由不会丢失。在保活模式下，子应用只会进行一次渲染，页面发生切换时承载子应用。主应用生命周期：（主应用生命周期跟模式没有关系）销毁子应用当前实例，子应用页面如果切换回来。：子应用渲染后触发（生命周期改造专用）：子应用卸载后触发（生命周期改造专用）
vue2老项目改造微前端，推荐使用什么技术框架？乾坤、micro-app 还是无界？给出最优改造示例
02-26
<think>好的，用户想了解在Vue2老项目改造为微前端时，应该选择乾坤、micro-app还是无界。我需要先分析每个框架的优缺点，然后结合Vue2项目的具体情况给出建议。 首先，乾坤（qiankun）是蚂蚁金服开源的微前端框架，社区活跃，文档齐全，适合中大型项目。但可能需要更多的配置，特别是对于老项目，可能需要调整路由和入口文件。另外，Vue2的支持应该没问题，但可能需要处理一些兼容性问题。 然后是micro-app，这个框架比较轻量，基于Web Components，接入相对简单，可能更适合快速改造。对于Vue2的支持应该也不错，不过社区和生态可能不如乾坤成熟，遇到问题时资源可能较少。 无界（wujie）是腾讯开源的，特点是利用Web Component和iframe相结合的方式，可能隔离性更好，对样式和JS冲突处理更优。不过，文档和社区支持可能不如前两者，特别是对于Vue2的具体案例，需要确认兼容性。 接下来考虑用户的项目情况。老项目可能希望改动尽可能少，快速集成。如果项目结构复杂，需要更完善的沙箱机制和状态管理，乾坤可能是更稳妥的选择。如果希望快速接入且项目不复杂，micro-app或无界可能更合适。 另外，用户可能需要具体的示例，所以需要选择一个框架，给出一个简单的改造步骤。乾坤在Vue2中使用较多，示例和文档丰富，可能更适合作为推荐。需要演示主应用和子应用的配置，如何修改路由和入口文件，以及如何处理依赖共享。 还要注意Vue2的版本是否和微前端框架兼容，比如生命周期钩子的处理，乾坤可能需要主应用和子应用都进行一些配置调整。同时，可能需要处理样式隔离问题，乾坤使用Shadow DOM，但有时候会有兼容性问题，需要测试。 最后，综合稳定性、社区支持和Vue2的兼容性，乾坤可能是最优选，尽管配置稍复杂。micro-app和无界作为备选，适合特定场景。需要给出一个具体的乾坤改造示例，包括主应用安装qiankun，修改main.js注册子应用，子应用导出生命周期钩子，调整路由和打包配置等步骤。</think>在 Vue2 老项目改造为微前端时，**乾坤（qiankun）**、**micro-app** 和 **无界（wujie）** 各有优缺点。以下是技术选型分析和最优改造示例： --- ### 一、框架对比 | 特性 | 乾坤 (qiankun) | micro-app | 无界 (wujie) | |--------------------|--------------------------------------------------------------------------------|--------------------------------------------------------------------------|------------------------------------------------------------------------------| | **成熟度** | 高（蚂蚁金服开源，社区活跃） | 中（社区逐渐增长） | 中（腾讯开源，较新但迭代快） | | **接入成本** | 中（需手动配置路由、生命周期） | 低（基于 Web Components，近乎零配置） | 低（类似 iframe 但更轻量） | | **沙箱隔离** | 支持 JS/CSS 沙箱 | 支持 CSS 沙箱，JS 隔离较弱 | 支持完善的 JS/CSS 沙箱 | | **通信机制** | 基于 `props` 或全局状态 | 基于 CustomEvent | 基于 iframe 通信机制 | | **适用场景** | 复杂项目、需强隔离性 | 轻量级项目、快速接入 | 需要 iframe 级隔离但追求体验 | --- ### 二、推荐方案 #### 1. **选择乾坤（qiankun）** 如果： - 项目复杂度高，需要强沙箱隔离 - 已有微前端经验，追求长期稳定性 - 需要细粒度控制子应用生命周期 #### 2. **选择 micro-app** 如果： - 追求快速改造，接入成本低 - 子应用技术栈多样（支持 Web Components） - 不需要严格的 JS 隔离 #### 3. **选择无界（wujie）** 如果： - 需要 iframe 级别的隔离但避免 iframe 的性能问题 - 子应用需要保留完整的浏览器环境（如依赖 `window` 的库） --- ### 三、最优改造示例（以乾坤为例） #### 步骤 1：主应用改造 ```bash # 安装乾坤 npm install qiankun -S ``` ```javascript // main.js import { registerMicroApps, start } from 'qiankun' // 注册子应用 registerMicroApps([ { name: 'vue2-subapp', entry: '//localhost:7101', // 子应用独立运行地址 container: '#subapp-container', activeRule: '/vue2-subapp', props: { /* 传递全局状态 */ } } ]) // 启动乾坤 start() ``` #### 步骤 2：子应用改造 ```javascript // 子应用入口文件 src/public-path.js if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ } // 子应用 main.js import './public-path' let instance = null function render(props = {}) { const { container } = props instance = new Vue({ router, store, render: h => h(App) }).$mount(container ? container.querySelector('#app') : '#app') } // 独立运行时直接渲染 if (!window.__POWERED_BY_QIANKUN__) { render() } // 导出乾坤生命周期钩子 export async function bootstrap() {} export async function mount(props) { render(props) } export async function unmount() { instance.$destroy() instance.$el.innerHTML = '' instance = null } ``` #### 步骤 3：配置子应用打包（vue.config.js） ```javascript module.exports = { devServer: { port: 7101, headers: { 'Access-Control-Allow-Origin': '*' // 允许跨域 } }, configureWebpack: { output: { library: `vue2-subapp`, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_vue2-subapp` } } } ``` --- ### 四、注意事项 1. **路由冲突**：主/子应用使用不同 base URL（如主应用用 `/main`，子应用用 `/subapp`） 2. **依赖共享**：通过 `externals` 复用公共库（如 Vue、Vuex） 3. **样式隔离**：乾坤默认启用沙箱，但复杂场景可补充 CSS Modules 或 BEM 命名规范 --- ### 五、总结 - **推荐乾坤**：适合长期维护的复杂项目，社区资源丰富。 - **备选方案**：micro-app 适合快速轻量改造，无界适合 iframe 替代场景。 - **改造关键点**：生命周期管理、路由隔离、依赖共享。
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值