qiankun 部署微前端-vue2 (二)

news2024/11/24 20:01:50

对于基本的部署问题,也可以去官网查找答案:

常见问题 - qiankun

这里主要记录在部署过程中遇到的问题

一、路由权限问题

无论主应用路由还是子应用中的路由,都会涉及权限问题,并不是每个路由路径对任何角色都是可见,所以我们在主应用 mian.js 中一般会加入(引入相关权限js,如permission.js)路由守卫(路由权限)。

思考一下,我们在主应用中添加/subapp 来访问子应用,但是这个并不是我们主应用定义路由中任何情况。

        所以我们需要在路由守卫 router.beforeEach 中添加对子应用中情况添加判断,我这里对子应用的路由直接next();

        

        如果此处不做修改,则会进入不到子应用的界面。

二、子应用调用接口地址代理不起作用。

         在子应用中,调用后端地址是在vue.config.js 进行代理配置,但是如果在主应用中访问的时候,此时代理是不走子应用的  devServer中proxy,这时候需要在主应用中添加对子应用相关代理。在添加之前,需要对子应用request请求添加判断配置。

在封装axios 请求方法中对访问模式添加判断,对非独立运行添加前缀,方便在主应用中代理配置中进行识别标识。

         在主应用中vue.config.js

devServer: {
    host: "",
    port: port,
    open: true,
    proxy: {
        // 访问子应用接口代理的地址
      ['/subapp'+process.env.VUE_APP_BASE_API]: {
        target: `http://1.1.1.1:7070`,
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
          ["^/subapp" + process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API,
        },
      },
          // 主应用运行代理地址
      [process.env.VUE_APP_BASE_API]: {
        target: `http://1.1.1.2:6070`,
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API,
        },
      },
      
    },
    disableHostCheck: true,
  },

      以上是开发模式下配置,生产模式也是如此。  

 自此就可以实现微应用主应用访问相关子应用的内容了,包含权限,接口服务等内容的畅通无阻了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/84428.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux学习-83-MySQL安装过程

17.12 MySQL安装 作为LAMP架构的后端,是一款流行的开源关系数据库系统。在企业网站、业务系统等应用中,各种账户信息、产品信息,客户资料、业务数据等都可以存储到MySQL数据库,其他程序可以通过SQL语句来查询,更改这些…

〖产品思维训练白宝书 - 产品思维认知篇①〗- 产品思维能够为我们带来多大的价值?

大家好,我是 哈士奇 ,一位工作了十年的"技术混子", 致力于为开发者赋能的UP主, 目前正在运营着 TFS_CLUB社区。 💬 人生格言:优于别人,并不高贵,真正的高贵应该是优于过去的自己。💬 &#x1f4e…

算法竞赛入门【码蹄集进阶塔335题】(MT2026-2050)

算法竞赛入门【码蹄集进阶塔335题】(MT2026-2050) 文章目录算法竞赛入门【码蹄集进阶塔335题】(MT2026-2050)前言为什么突然想学算法了?为什么选择码蹄集作为刷题软件?目录1. MT2026 二维坐标点移动2. MT2027 一秒成零3. MT2028 小…

开关量转4G模块直接阿里云操作介绍

开关量转4G模块直接阿里云操作介绍首先,设备接入阿里云阿里云的连接 同上,配置阿里云平台参数前,和华为云一样,首先要在阿里云控制台创建产品,添加设备获取设备证书 上云流程:创建产品--添加设备--获取证书…

USACO简介

USACO是美国信息学奥赛官网,网站为:USACO 其中还包括USACO TRAINING题目,这是一个可以做练习的网站,网站为USACO Training Gateway 进入USACO网站,我们可以看到以下图片 下来简要说一下关于USACO的注意事项 1.USACO…

python-(6-5-3)爬虫---处理防盗链获取视频

文章目录一 需求二 分析1 拿到contId2 拿到video_status返回的json -----> src Url3 对src Url 进行修整4 下载资源三 代码一 需求 想要获得某处的视频资源,但由于防盗链的存在,使得在使用浏览器的开发页面获得的视频地址与我们实际获取的地址产生差…

Spring源码深度解析十四:@Aspect方式的AOP上篇 - @EnableAspectJAutoProxy

一、前言 文章目录:Spring源码深度解析:文章目录 二、简介 Aop 即面向切面编程,而 Aspect 是Aop 思想的一种实现。 并不是所有的AOP框架都相同,它们在连接点模型上可能有强弱之分,有些允许在字段修饰符级别的应用通…

分享a股下单接口执行买入操作的流程代码

用户在使用a股下单接口&#xff0c;能够得到更多更准确的信息&#xff0c;让用户在股市当中&#xff0c;操作起来更加便捷和有效&#xff0c;对股市市场行情动向判断更加的准确一些。 下面看一下a股下单接口是如何执行买入操作的功能&#xff1a; std::cout << " …

小程序批发订货怎么做

小程序订货系统 批发订货是每个生产企业都不少不了的一个环节&#xff0c;伴随着信息化技术的不断更新&#xff0c;传统的订货方式已经不能满足生产企业的需求了&#xff0c;而鲜桥小程序订货系统基于微信生态&#xff0c;让你即买即用&#xff0c;轻松告别传统的订货方式&…

Java解析NC2018-2020降水量格点数据

经纬度范围 lon = 7849;lat = 5146;time = 12;double lon(lon=7849); :long_name = "longitude"; :unit = "degree"; double lat(lat=5146); :long_name = "latitude"; :unit = "degree"; double time(time=12); :long_nam…

【论文】Holistically-Nested Edge Detection

文章目录Development of Edge DetectionMulti-scale learning structureLoss FunctionNetwork Architecture&#x1f4c4;&#xff1a;Holistically-Nested Edge Detection&#x1f517;&#xff1a;https://openaccess.thecvf.com/content_iccv_2015/html/Xie_Holistically-Ne…

DSP篇--C6701功能调试系列之SRAM、ADC、喂狗测试

目录 1、SRAM测试 1.1 SRAM读写功能测试 1.2 EDAC测试 2、ADC测试 3、DSP喂狗测试 调试的前期准备可以参考前面的博文&#xff1a;DSP篇--C6701功能调试系列之前期准备_nanke_yh的博客-CSDN博客https://blog.csdn.net/nanke_yh/article/details/128277631 1、SRAM测试 1…

国税局验证码识别 识别不了我还不能input吗

前言 最近接到一个需求&#xff0c;就是在国税局的网页中输入 【发票代码】、【*发票号码】、【*开票日期】、【*开具金额(不含税)】、【*验证码】 然后将此发票进行下载&#xff0c;但是【验证码】真的是拦路虎啊&#xff0c;我也查询了好多大佬的论文&#xff0c;有的是通过J…

OTP语音芯片ic的工作原理,以及目前的现状和技术发展路线是什么?flash型

目录 otp工艺和flash工艺的区别和概念 衡量一个芯片的成本&#xff0c;简单可以归结为3个方面 芯片的生产工艺&#xff0c;比如OTP的工艺都是100nm左右的工艺、8寸晶圆&#xff0c;很便宜。并且OTP的技术需要光刻机光照的次数少&#xff0c;所以生产起来快&#xff0c;这样无…

openCV实战项目--人脸考勤

人脸任务在计算机视觉领域中十分重要&#xff0c;本项目主要使用了两类技术&#xff1a;人脸检测人脸识别。 代码分为两部分内容&#xff1a;人脸注册 和 人脸识别 人脸注册&#xff1a;将人脸特征存储进数据库&#xff0c;这里用feature.csv代替人脸识别&#xff1a;将人脸特…

【云计算与大数据技术】数据编码LZSS算法、Snappy压缩库及分布式通信系统的讲解(图文解释 超详细)

一、数据编码概述 数据编码概述 - 在分布式系统中需要处理大量的网络数据,为了加快网络数据的传输速度,通常需 要对传输数据进行编码压缩 数据压缩是以尽可能少的数码来表示信源所发出的信号&#xff0c;减少容纳给定的消息集合或数据采样集合的信号空间&#xff0c;这里讲的…

Linux安装Maven

目录 1.下载安装包 2.解压Maven 3.添加环境变量 4.检测Maven是否搭建成功 5. 编辑 Maven的settings.xml文件 5.1设置本地仓库 5.2添加阿里云镜像 1.下载安装包 访问查看需要的版本&#xff1a;Index of /dist/maven (apache.org) 安装包统一存放到/opt/software目录下…

Java基于springboot校园德育活动预约和评分管理系统+vue+elementUI

本系统结合计算机系统的结构、概念、模型、原理、方法&#xff0c;在计算机各种优势的情况下&#xff0c;采用JAVA语言&#xff0c;结合SpringBoot框架与Vue框架以及MYSQL数据库设计并实现的。本校园德育活动预约和评分管理系统主要包括个人中心、学生管理、活动信息管理、活动…

使用Docker实现容器之间的互通

目录 怎样实现容器之间的相互通信&#xff1f; 情况1&#xff1a;两个容器在同一网段上 情况2&#xff1a;两个容器在不同网段上 怎样实现容器之间的相互通信&#xff1f; 情况1&#xff1a;两个容器在同一网段上 命令拓展&#xff1a; 删除所有容器&#xff1a;docker rm …

NuSences 数据集解析以及 nuScenes devkit 的使用

文章目录一、官网介绍1.1 总览(Overview)1.1.1 数据搜集(Data collection)1.1.2 传感器同步&#xff08;Sensor synchronization&#xff09;1.2 数据格式&#xff08;Data format&#xff09;attributecalibrated_sensorcategoryego_poseinstancelidarseglogmapsamplesample_a…