【qiankun】前端微服务架构踩坑记录

前言

最近公司前端项目在重构，我经过调研后架构确定为bff+qiankun微服务。bff还没开始呢，微服务这块遇到了很多问题，也使用了一段时间了，临时总结一下：

1.部署阶段最容易踩坑

2.是路由切换问题容易踩坑

3.主应用和子应用之间的依赖冲突和样式冲突

以后会持续更新~

1.Cannot GET /cooperation/board

场景：

主应用载入子应用资源时，找不到子应用资源。

分析

在分析原因的过程中，并没有在 webpack5 的配置中找到原因，考虑到使用的是

vue-cli

脚手架，然后脚手架使用的 webpack5 , 所以搜索了

vue-cli

的改动记录。

在这个PR中找到了原因。 fix(cli-service): restrict request headers of historyApiFallback in WebpackDevServer by githoniel · Pull Request #6162 · vuejs/vue-cli · GitHub

this PR will restrict request headers 
of historyApiFallback only work with 
[ 'text/html', 'application/xhtml+xml']

解决

qiankun加载子应用时发起的fetch请求，且请求头里面没有

text/html

等header。所以

historyApiFallback

配置对它无效。而本项目又是

history

模式路由，所以带路由 /xxx/xxx 过来请求，就会 404.

修改方案为自己传入

historyApiFallback

配置.

 historyApiFallback: {
      index: '/xxx/index.html' // xxx为路径，和打包output配置有关
    },

2.Invalid options in vue.config.js:"css.requireModuleExtension" is not allowed

原因

此问题为

vue-cli

升级导致的。

有个微应用使用了

css modules

方案，配置了 在

vue.config.js

中配置了

css.requireModuleExtension

，而该字段在 V5 版本中已经移除。"css.requireModuleExtension" is not allowed · Issue #6607 · vuejs/vue-cli · GitHub 。用以下

css-loader

配置来替代。

解决

module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          auto: () => true
        }
      }
    }
  }
}

3.less版本升级导致除法写法未转换

原因

此问题是 less 版本升级导致。

其原因是 Less.js 用法 | Less.js 中文文档 - Less 中文网 , 4.x 中修改了math的默认配置。

(@m-gap / 2)

或者

(@m-gap ./ 2)

才会默认转换。

解决

有个微应用 less版本由 3.x 升级到 4.x 后，发现样式有问题。 后定位发现

padding: @m-gap / 2 @m-gap;

转换为了

padding: 16px / 2 16px

，除法未做计算。

4.主子应用样式隔离

场景

一个典型的场景是主应用使用vue3+elementplus，子应用使用vue2+elementUI.首先说明一点乾坤对于子应用之间是自带样式隔离的，但是主子应用之间没有，那这不可避免地带来样式冲突问题（也包括第三方样式库，比如elementui）

解决

解决方式有3种，第一种是手动设置样式名（不好用），第二种是使用css moducles 插件

我使用的第三种，在elementplus的2.2版本及以上有了命名空间，可以给所有的样式修改一个前缀，比如说：.el-button,我们可以换成ep-button，这样就避免了主应用和子应用使用相同的样式库带来的冲突问题

5.在webpack5中配置output报错

报错如下

原因

jsonpFunction在webpack5被chunkLoadingGlobal替代

解决

configureWebpack: {
        output: {
          library: `${name}-[name]`,//6.接入乾坤
          libraryTarget: 'umd', // 把微应用打包成 umd 库格式
          chunkLoadingGlobal: `webpackJsonp_${name}`, 
        //   jsonpFunction在webpack5: `webpackJsonp_${name}`,
         // jsonpFunction在webpack5被chunkLoadingGlobal替代
        },
      },

6.微应用部署后报错

场景

部署后刷新页面，url地址栏 回车时报错

报错如下

关键字：Expected a JavaScript module script but the server responded with a MIME type of

原因

vite静态资源路径配置问题

解决

publicpath之前是‘ ./’改为**‘/’ **

官方文档说的是‘./’用于开发环境的