【qiankun】前端微服务架构踩坑记录-Toy模板网

这篇具有很好参考价值的文章主要介绍了【qiankun】前端微服务架构踩坑记录。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

1.Cannot GET /cooperation/board

场景：

分析

解决

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

原因

解决

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

原因

解决

4.主子应用样式隔离

场景

解决

5.在webpack5中配置output报错

报错如下

原因

解决

6.微应用部署后报错

场景

报错如下

原因

解决

前言

最近公司前端项目在重构，我经过调研后架构确定为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报错

报错如下

【qiankun】前端微服务架构踩坑记录,前端微服务,前端,架构,vue.js,reactjs

原因

jsonpFunction在webpack5被chunkLoadingGlobal替代

解决

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