qiankun 部署微前端-vue2 （二）

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

常见问题 - 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,},

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

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

qiankun 部署微前端-vue2 （二）相关推荐

qiankun 部署微前端-vue2（一）
自从前后端分离以来,一直都有个困惑,就是随着项目的功能的不断拓展,项目变得不断臃肿,每次打包编译,都要把整个项目编译,非常耗时.如果前端也能像后端一样,在项目搭建初期,有类似微服务的功能,那就好了.现 ...
微前端应用及基于qiankun的微前端实践
示例代码仓库: yl-qiankun-base:https://gitee.com/dongche/yl-qiankun-base.git yl-qiankun-child-vue:https://g ...
基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇
写在开头微前端系列文章: 基于 qiankun 的微前端最佳实践(万字长文) - 从 0 到 1 篇基于 qiankun 的微前端最佳实践(图文并茂) - 应用间通信篇万字长文+图文并茂+全面解 ...
jsp给前端注入值失败_基于 qiankun 的微前端最佳实践（图文并茂）应用间通信篇...
引言大家好~ 本文是基于 qiankun 的微前端最佳实践系列文章之应用间通信篇,本文将分享在 qiankun 中如何进行应用间通信. 在开始介绍 qiankun 的应用通信之前,我们需要先了解微 ...
qiankun 微前端_基于qiankun落地部署微前端爬”坑“记
❝ 前沿:前半年微前端火得一踏糊涂,刚好业务需求上有这样的应用场景,针对目前的微前端解决方案做了技术选型,qiankun作为蚂蚁金服内部孵化出来的微前端解决方案,经过线上应用充分检验及打磨最后开源,最 ...
基于qiankun落地部署微前端爬”坑“记
前沿:前半年微前端火得一踏糊涂,刚好业务需求上有这样的应用场景,针对目前的微前端解决方案做了技术选型,qiankun作为蚂蚁金服内部孵化出来的微前端解决方案,经过线上应用充分检验及打磨最后开源,最终选 ...
使用各种姿势舒服的部署微前端项目（上：打包与上传）
微前端作为解决巨石应用模块化和降低技术框架变动风险的神器,我觉得是当下前端发展的一大方向,可以在未来5-10年内保持生命力. 作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了 ...
vue项目落地(qiankun.js)微前端服务
什么是微前端? 网上抄的: 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用.各个前端应用还可以独立开发.独立部署 ...
基于 qiankun 的微前端应用实践
业务背景云音乐广告 Dsp(需求方平台)平台分为合约平台(Vue 框架)和竞价平台(React 框架),因历史原因框架选型未能统一,最近来了新需求,需要同时在两个平台增加一样的模块,因为都是 Dsp ...

qiankun 部署微前端-vue2 （二）

qiankun 部署微前端-vue2 （二）相关推荐

最新文章

热门文章