目录
前言
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报错
报错如下
原因
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之前是‘ ./’改为‘/’
官方文档说的是‘./’用于开发环境的
