qiankun前端微服务框架-同一服务器同一端口

已于 2023-02-13 18:18:06 修改
阅读量1.6k 收藏 4
点赞数
分类专栏： qiankun 文章标签： javascript qiankun vue
于 2021-08-10 15:38:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/r657225738/article/details/119570973
版权

基于vue3编码
部署在同一服务器同一端口需要注意的点
官方文档：qiankun

主应用

entry
对应package.json里的name
main.js里的路由设置(history)
activeRule
index.html的id
main.js里的匹配值,代指匹配id
在这里插入图片描述

子应用

第一步:配置History在这里插入图片描述

第二步：配置publicPath

在这里插入图片描述

第三步：统一library名称，需要与主应用中配置的name保持一致

在这里插入图片描述

Nginx

nginx配置

在这里插入图片描述
在这里插入图片描述

目录结构

在这里插入图片描述

情系半生e
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
乾坤 微前端_再谈微前端
weixin_39835965的博客
11-05 1048
前言我们的业务主要是做一些中后台的前端项目，有两个特点：生命周期长、代码量庞大，这带来了技术栈落后、编译部署慢两个问题。虽然我们之前在编译缓存上做了些努力，但是治标不治本，在项目极大的情况下编译时间还是不够理想。因此，微前端应该是唯一的解决方案了。于是我们做了一些微前端的技术调研，主要是乾坤和single-spa这两个框架，一开始我们觉得基于single-spa的乾坤应该会比single-spa本...
qiankun-template:基于qiankun搭建的前端微服务项目
05-03
qiankun-template 基于qiankun搭建的前端微服务项目 qiankun 项目实际搭建， 及各种微应用流行框架技术 的配置; vue2.x vue3.x react16 umi2 + dva umi3 + dva 初衷：自己当时摸索qiankun构建项目时，问题百出， ...
微前端乾坤 主应用和微应用在同一个服务器上
zxl_start的博客
12-01 1977
一、主应用的main.js配置微应用的入口 二、主应用中的菜单写死 主应用子应用路由设置base 主应用histroy模式 子应用hash模式 主应用打包配置 子应用打包配置 打包文件 ngix配置
高频面试题：微服务Qiankun和Wujie的前端面试频率较高的面试题和答案（十）
最新发布
05-13 609
`qiankun`（乾坤）是一个用于构建微前端架构的JavaScript库，而`wujie`（无界）是一个基于React的UI组件库。以下是一些可能会在面试中问到的关于`qiankun`和`wujie`的前端面试题及答案：
qiankun微前端部署（主/子应用部署在同一个服务）(2024.05.20更新~)
Alice_hhu的博客
01-26 953
qiankun微前端部署（主/子应用部署在同一个服务）
前端微服务化（微前端）探索-蚂蚁金服乾坤框架3-部署到服务器（通过nginx配置不同端口）
qq_36006836的博客
02-07 6255
部署qiankun应用
vue项目qiankun框架主应用和子应用用nginx部署,路由前缀，生产环境打包
Frank_colo的博客
07-21 1952
主应用的vite.prod.config.ts配置文件的base字段，这个字段和nginx部署的文件结构有关，base表示打包后的主应用文件放到服务器的哪个文件夹中，默认是base:"/" ,默认将主应用文件放在服务器的根目录中。在子应用的路由文件中，设置基础路由，这个基础路由要和主应用配置的activeRule一样，这样才能激活子应用。当子应用的基础路由是/homepage时，那么子应用的路由表的所有path字段的前缀就是/homepage。在main.ts中注册子应用时的配置对象。
前端微服务化（微前端）探索-蚂蚁金服乾坤框架2-通信
qq_36006836的博客
02-07 297
qiankun框架通信
基于qiankun+vue-elment-admin打造微服务使用说明v.1.01
08-03
介绍：基于 qiankun+vue-elment-admin 打造微服务使用说明 v.10博客地址：https://blog.csdn.net/tamil202
微前端架构模板--qiankun.zip
07-14
微前端架构模板--qiankun
qiankun-微前端-vue2
08-15
qiankun-微前端-vue2
qiankunDemos:微服务框架方案
04-06
本项目用于探索微前端乾坤框架的使用 下载代码 git clone :wzy4072/qiankunDemos.git 仓库地址： 三个项目基于vue-cli创建的hello-word工程 日志：2021.3.31 16.40 根据乾坤官方文档 进行了基本配置 实现了预期效果。 配置概括如下 1 主应用 注册子应用 2 主应用 配置路由 设置挂载点 3 子应用 配置 output 4 子应用 配置钩子函数 任务 主应用登录 子应用使用token 需求 1微应用可以独立访问 2 MainApp main.js import { registerMicroApps, start } from 'qiankun'; registerMicroApps([ { name: 'vue app', entry: '//localhost:5001', container:
qiankun乾坤快速简单完整的微前端解决方案
08-08
qiankun（乾坤）
前端微服务化（微前端）探索-蚂蚁金服乾坤框架初使用
qq_36006836的博客
02-07 735
踩点qiankun框架
基于Vue-cli3.0的qiankun（乾坤）前端微服务说明
qq_36711388的博客
05-23 1983
基于Vue-cli3.0的qiankun（乾坤）前端微服务说明 官方文档地址：qiankun.umijs.org/zh 主服务 1.安装乾坤依赖(子服务不需要安装，只需要暴露生命周期方法) 2.在入口文件js中添加如下代码 import {registerMicroApps, start} from "qiankun"; let microProject = [ { //项目名称，应当与子服务中的package.json项目名称一致 name: 'wdcsLogin app', ...
qiankun前端微服务框架
R的博客
05-27 3160
目录一.须知二.主应用配置三.微应用配置如何创建Vue3项目 一.须知 官网: https://qiankun.umijs.org/zh/guide 主应用: 支持任意技术栈,无限制 微应用: 暂不支持vite2.x 版本,因为vite打包代码时，内部的esbuild会tree shake掉与qiankun相关的生命周期钩子 二.主应用配置 三.微应用配置 注册 vue.config.js const path = require("path"); const packageName = r
微前端，从0开始搭建qiankun乾坤微服务
qq_40505914的博客
10-08 296
什么是微前端？为什么要用微前端？微前端：微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。与技术栈无关，团队独立开发，独立部署，微应用之间独立运行由于前端技术更迭，需要用新技术开发，旧代码不动，用微前端可以解决。如老项目用vue2开发，新项目功能用vue3，在同一个页面下，做到技术隔离。或者同一个页面既有Angular，也有Vue项目。
关于qiankun的使用与部署过程，全详细记录
我的Object Lift
12-22 6366
1.安装qiankun qiankun的官网qiankun - qiankun 安装过程 $ yarn add qiankun # or npm i qiankun -S 主应用安装，子应用不需要安装； 2.主应用qiankun配置内容； vue -template -admin作为本次记录的主体； 新建micro.js 在一下代码段中，将按照qiankun的配置模式，为主应用配置加载的主应用内容； /** * qiankun 模式 * 子系统构建主控文件 ...
qiankun微服务搭建
u013776700的博客
09-29 1595
乾坤微服务架构的基座应用搭建
qiankun el-date-pickerpopper.js报错
05-29
看起来你的问题与前端微服务框架 qiankun 以及 ElementUI 的日期选择器组件有关。el-date-pickerpopper.js 是 ElementUI 内部使用的一个弹出层组件，用于显示日期选择器。 可能的原因之一是，当你在 qiankun 环境中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

情系半生e

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值