qiankun-通过主应用加载子应用，开发环境跨域代理proxy无效

最新推荐文章于 2023-01-04 14:09:53 发布
最新推荐文章于 2023-01-04 14:09:53 发布
阅读量6.7k 收藏 1
点赞数 5
分类专栏： qiankun vue 跨域 文章标签： proxy vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44263646/article/details/116719317
版权
qiankun 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
vue
2 篇文章 0 订阅
订阅专栏
跨域
1 篇文章 0 订阅
订阅专栏

本项目子应用都是vue，子应用配置的请求代理，在独立运行是没问题的。
但是通过主应用去加载的子应用，子应用发出的请求实际已经被主应用劫持了，
自然不会运行到子应用的请求代理。
所以主应用也需要配置子应用需要的请求代理。

门前小小小树
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
专栏目录
qiankun-vue:分享一套qiankun开发vue微应用的场景解决方案
05-08
简介 分享此demo仅便于学习和解决项目开发上的问题，demo只使用了VUE框架。项目统一使用最外层pagekage.json安装插件来实现项目一致性，遇到特定第三方插件单独在项目pagekage.json配置。项目主要采用history + [hash || history]，子项目有使用cdn加速的案例。 如下解决一些问题： 多应用间公用组件开发 相同VUE配置环境开发环境 切换应用后不需要重新加载应用 安装 $ npm install $ npm run projects:install $ npm run projects:start 主应用地址 http://localhost:8090 打包 $ npm run projects:build 目录说明 root/ common/ components/ 公用组件 layouts/ dist/
vue qiankun 主应用访问子应用 不显示也不报错
风间琉璃c
01-12 1万+
业务背景：原内管平台中子系统越来越多，项目越来越大，打包发布需要十几分钟，本地运行npm run dev都非常容易因为内存不够导致崩溃（虚拟桌面内存就8G），业务打算将渠道管理平台中的一个子系统独立出来，用qiankun改成微前端架构。 介绍 - qiankunhttps://qiankun.umijs.org/zh/guide 遇到的问题：从主应用访问子应用时，控制台不报错，但是页面显示空白。 之前在测试demo中成功搭建过一次，由于过了两周印象不是很深刻，打算再重新搭建一次demo，主应用和子应用
微前端：qiankun 主应用与子应用之间的跳转
Jane's Blog
01-04 4944
qiankun主应用与子应用间的跳转
当使用qiankun时vue-devtools无法观测到子应用的解决方案
q140948940的博客
04-08 1933
原内容在[反馈]使用qiankun时，vue-devtools无法调试子项目 我采用了作者推荐的第二种方案进行解决 instance = new Vue({ router, store, i18n, render: h => h(App), }).$mount(container ? container.querySelector('#app') : '#app') if (process.env.NODE_ENV === 'development') { // vue-d.
qiankun-example::rocket: qiankun实战demo，父应用vue，子应用用react和vue
05-08
qiankun-example qiankun 实战 demo，父应用 vue，子应用用 react 和 vue
微前端（qiankun）中，主应用无法加载子应用的静态资源
weixin_44685906的博客
07-28 7174
微前端（qiankun）中主应用加载子应用资源
qiankun框架: vue2 主应用访问子应用报错 [import-html-entry]:error occurs 或 died in status LOADING_SOURCE_CODE
热门推荐
风间琉璃c
02-09 2万+
控制台报错：Uncaught Error: application 'contractCenterApps' died in status LOADING_SOURCE_CODE: [qiankun]: You need to export lifecycle functions in contractCenterApps entry 或者 之类的错误，都可能是这个原因。 这个问题仅限vue2，即文件目录结构为： 这种的，vue3不会有这个问题，vue3直接在vue.con...
乾坤实战 采坑之旅（主应用的某个路由页面加载微应用）
dongheng123的博客
12-19 1877
qiankun 主应用的某个路由页面加载微应用
微前端(qiankun)接入项目、主应用与子应用之间通信
weixin_45952434的博客
07-14 5527
微前端(乾坤接入)、主应用与子应用之间通信
qiankun属性主应用开启
qq_32615575的博客
01-20 761
子应用可通过获取以下属性判断子应用是否嵌套在主应用中 window.__POWERED_BY_QIANKUN__ true 值为这个时代表，主应用开启嵌入子应用 false 没有开启
qiankun-micro-app:qiankun 微前端应用实践与部署
05-14
qiankun 微前端应用实践与部署 微前端应用分为主应用与子应用，部署方式是分别编译好主应用与子应用，将主应用与子应用部署到 nginx 配置好的目录即可。 代码仓库 分别进入 portal、app1、app2 根目录，执行: 开发模式 # portal yarn yarn start # app1、app2 npm install npm run dev 生产模式 # portal yarn build # app1、app2 npm run build 主应用 主应用 js 文件引入 qiankun 注册子应用，并编写导航页显示跳转逻辑。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>QianKun Example</title> </head> <body> <div cla
qiankun-angular-angularjs:基于 qiankun，主应用为 angular，子应用为angularjs
05-29
QiankunAngularAngularjs 基于qiankun,实现了在angular9主应用下挂angularjs子应用的范例。可实现angularjs和angular9优雅共存，增量迁移。本工程只是对qiankun官网样例的补充，如果想要详细了解qiankun请访问官网：https://qiankun.umijs.org/ 工程启动 在主应用与子应用下先分别完成依赖的安装 npm install 启动主应用 npm run start:main 启动 angularjs 子应用 npm run start:angularjs 启动 angular9 子应用 npm run start:angular9 运行效果 切换angular9 切换angularjs 参考资料 qiankun: https://qiankun.umijs.org/ single-spa/ecosystem/a
qiankun - vue子应用
01-30
qiankun - vue子应用
分布式系统.pptx
04-29
分布式系统.pptx
源代码-360通用ASP防护代码(防sql注入).zip
04-29
源代码-360通用ASP防护代码(防sql注入).zip
node-v8.1.0-darwin-x64.tar.gz
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
2020年ti杯电赛省赛A题代码整理
04-29
2020年ti杯电赛省赛a题的项目 分为 手机端（android），主显示端，姿态检测手环端，心率滤波读取端 mcu 采用的是esp32.结合了适配esp32的arduino以及rtos框架进行开发。 开发环境 及 语言 安卓为android studio java开发 esp32为platform io c/c++ 节点间通信方式 tcp直连，手机端为总服务端 手机端 android 原生开发 主显示端 屏幕ili9341 spi 触摸xpt2046 图形 adafruit gfx ad芯片 ads112c04 测温 lmt70 姿态检测端 9轴 bno055 心率检测 心电 ads1292
node-v6.15.0-sunos-x64.tar.gz
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v9.3.0-x86.msi
最新发布
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
@umijs/plugin-qiankun主应用如何配置
06-08
@umijs/plugin-qiankun 是一个用于在主应用中集成微前端应用的插件。要在主应用中使用该插件，需要进行以下配置： 1. 安装插件： ```bash npm install @umijs/plugin-qiankun --save ``` 2. 在.umirc.ts 或 config/config.ts 中进行配置： ```typescript export default { qiankun: { // 注册子应用信息 apps: [ { name: 'app1', // 子应用名称 entry: '//localhost:8001', // 子应用入口 URL base: '/app1', // 子应用的基础路径 mountElementId: 'app1', // 子应用挂载的 DOM 节点 ID }, { name: 'app2', entry: '//localhost:8002', base: '/app2', mountElementId: 'app2', }, ], // 预加载子应用 prefetch: true, // 是否开启沙箱 sandbox: true, }, }; ``` 其中，`apps` 为子应用列表，每个子应用包含以下属性： - `name`：子应用名称，唯一标识符。 - `entry`：子应用入口 URL。 - `base`：子应用的基础路径。 - `mountElementId`：子应用挂载的 DOM 节点 ID。 `prefetch` 表示是否预加载子应用，`sandbox` 表示是否开启沙箱模式。 3. 在主应用的页面中使用 `qiankun` 组件进行渲染： ```typescript import React from 'react'; import { MicroApp, render } from 'umi'; export default function() { return ( <div> <MicroApp name="app1" /> <MicroApp name="app2" /> </div> ); } ``` 以上就是 @umijs/plugin-qiankun 在主应用中的配置过程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值