[qiankun]实战问题汇总
[qiankun]实战问题汇总
- ERROR SyntaxError: Cannot use import statement outside a module
- 问题分析
- 解决方案
- 子应用命名问题
- 问题分析
- 解决方案
- 'jsonpFunction'
- 详细错误信息
- 问题分析
- 解决方案
- 微应用的注册问题
- `Uncaught Error: application 'cli5-beta6-test-name' died in status LOADING_SOURCE_CODE: [qiankun]: Target container with #childApp not existed while cli5-beta6-test-name loading!`
- 分析
- `single-spa.min.js?25a2:2 Uncaught Error: application 'cli5-beta6-test-name' died in status NOT_MOUNTED: [qiankun]: Target container with #childApp not existed while cli5-beta6-test-name mounting!`
- 分析
- 解决方案
- 子应用空白的问题
- [Vue Router warn]: A hash base must end with a "#":
- single-spa.min.js?25a2:2 Uncaught (in promise) Error: single-spa minified message #21
- 现象描述
- 解决方案
- 微服务的挂载问题
- 现象描述
- 分析
- 解决方案
- [qiankun] lifecycle not found from xxx-web entry exports, fallback to get from window[ 'xxx-web']
- 现象描述
- 解决方案
- App has already been mounted
主要是在qiankun的实现过程中遇到的各种的问题，这里做一个汇总，方便以后的查阅
ERROR SyntaxError: Cannot use import statement outside a module
问题分析
该问题是在子应用中通过import引入package文件导致的
解决方案
解决方案说是node早先只支持CommonJS的模块化方案，所以ES6的模块化特性用不了。但是在Node V13.2.0之后开始实验性的支持ESM模块化，不过需要创建package.json文件指明type类型为module。
但是添加之后仍旧报错
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'd:'
最后还是使用了require解决了该问题
const config = require('./package');
子应用命名问题
问题分析
该问题是在加载微前端服务的时候发生的，微服务无法正常加载，或者找不到微服务，如果你确定部署了该微服务的情况下，请确保该微服务的命名问题.
解决方案
output: {// 该值需要与主项目中注册时的name值相对应library: `${packageName}`,libraryTarget: 'umd',jsonpFunction: `webpackJsonp_${packageName}`,}
一般这里的packageName是package.json中设置的name的值，也即项目名称，一般都使用英文，例如：micro-application
registerMicroApps([{name:projectName, //注册时的name值entry:projectDns,container: '#micro',activeRule:projectActiveRule,// 子应用触发规则（路径）props:{user:{ },activeRule:projectActiveRule//用于动态设置子应用的路由前缀}}}])
projectName与${packageName}应该相同否则加载存在问题
‘jsonpFunction’
详细错误信息
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.- configuration.output has an unknown property 'jsonpFunction'. These properties are valid:object { assetModuleFilename?, auxiliaryComment?, charset?, chunkFilename?, chunkFormat?, chunkLoadTimeout?, chunkLoading?, chunkLoadingGlobal?, clean?, compareBeforeEmit?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolModuleFilenameTemplate?, devtoolNamespace?, enabledChunkLoadingTypes?, enabledLibraryTypes?, enabledWasmLoadingTypes?, environment?, filename?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateGlobal?, hotUpdateMainFilename?, iife?, importFunctionName?, importMetaName?, library?, libraryExport?, libraryTarget?, module?, path?, pathinfo?, publicPath?, scriptType?, sourceMapFilename?, sourcePrefix?, strictModuleErrorHandling?, strictModuleExceptionHandling?, trustedTypes?, umdNamedDefine?, uniqueName?, wasmLoading?, webassemblyModuleFilename?, workerChunkLoading?, workerWasmLoading? }-> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.Did you mean output.chunkLoadingGlobal (BREAKING CHANGE since webpack 5)?
问题分析
output: {// 该值需要与主项目中注册时的name值相对应library: `${packageName}`,libraryTarget: 'umd',jsonpFunction: `webpackJsonp_${packageName}`}
主要是该段代码导致的
解决方案
- 该问题主要是微应用导出时jsonpFunction的设置值导致的，该值随着webpack5的升级没有该属性了，并且该属性与跨域无关。最开始线上部署的跨域问题，我一直以为和该属性的设置相关，但其实没有关系，直接删除该属性即可
- 如果删除以上属性仍然存在报错可更改为以下的微服务导出设置
configureWebpack:{output: {library: {name:`${config.name}`,//项目名称值type:'umd'// 把子应用打包成 umd 库格式},}
}
因为随着相关包的升级，配置方式也发生了变更，最终采用的配置方案是以上方式
微应用的注册问题
Uncaught Error: application 'cli5-beta6-test-name' died in status LOADING_SOURCE_CODE: [qiankun]: Target container with #childApp not existed while cli5-beta6-test-name loading!
以上是微服务注册时的报错信息
分析
关于问题1，主应用为VUE时，路由含有过渡效果，就会出现加载子应用的时候dom节点#childApp 不存在，但是加载前查看发现是存在的，感觉是加载的时候#childApp被覆盖了，查找相关代码，确保挂载微服务的时候该节点存在，可以修改微服务的注册时机，以确保容器渲染完成再加载微服务
single-spa.min.js?25a2:2 Uncaught Error: application 'cli5-beta6-test-name' died in status NOT_MOUNTED: [qiankun]: Target container with #childApp not existed while cli5-beta6-test-name mounting!
分析
说明它一开始是有container容器的，因为如果一开始就没有的话，报错应该是：Target container with #container not existed while xxx loading 一开始有，中途没有了，那就一定是有代码改变了document，导致container丢失。所以需要从这个原因取排查代码
解决方案
以上两个问题最终都通过相同的方式解决了，在设计路由的时候在主应用追加了
{path: "/micro/:pathMatch(.*)*",component: () => import(/* webpackChunkName: "micro" */ "../views/micro/index.vue")},
然后在views/micro/index.vue文件中添加dom,注册 container 设置为该dom
//主应用
<div id="micro"></div>registerMicroApps([{name: 'cli5-beta6-test-name', entry: 'http://localhost:8081',container: '#micro',activeRule: '#/micro/cli'// 子应用触发规则（路径）
}])
//子应用
const router = createRouter({history: createWebHashHistory((window as any).__POWERED_BY_QIANKUN__ ? "/micro/cli" : ""),routes,
});
子应用空白的问题
子应用如果是直接展示，内容可以正常加载出来，但是作为微服务没有内容
主应用App.vue,
<template><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/cliChild">About</router-link></div>
</template>
子应用App.vue是以下内容的
<template><div id="root">mycontent<router-view v-slot="{ Component }"><transition name="router-fade" mode="out-in"><keep-alive><component :is="Component"/></keep-alive></transition> </router-view></div>
</template>
这个问题最后发现是缺少 #，因为时hash路由，所以设置路由前缀的时候需要加上#
history: createWebHashHistory((window as any).__POWERED_BY_QIANKUN__ ? "#/micro" : "")
[Vue Router warn]: A hash base must end with a “#”:
在修复上面那个问题后，就出现了这个警告，这个警告很是奇怪，我只是希望设置路由时添加前缀 #/micro/sonApplicationPrefix,但是就多了上面的警告信息
single-spa.min.js?25a2:2 Uncaught (in promise) Error: single-spa minified message #21
现象描述
该报错发生在我想多次注册统一名称的微服务的时候。某个微服务下可能存在多个路由页面，这些路由页面都希望能够被主应用中作为菜单加载，这就导致了同一个微服务被多次注册的现象（因为多个路由页面的微服务dns是相同的）
解决方案
因为是多个微服务注册发生的，所以要避免微服务的多次注册。在注册微服务之前我们要把同一个微服务的注册项过滤掉，因为该微服务只要注册过一次，当我们访问该微服务的其它路由页面的时候，会根据路径自动触发之前注册过的该微服务
微服务的挂载问题
现象描述
微服务挂载过程中，有一个微服务页面总是无法正常挂载，但是在该路由页面直接刷新页面的时候又正常挂载了，经过对比分析发现是微服务的渲染函数中，这一行代码导致的，这一行代码被写成了:
app.mount(container ? "#app" : "#app")
分析
微服务挂载的时候是根据主服务传递的 container 进行挂载的，因为 container是指定的主服务的容器，而#app则是子服务单独运行的挂载容器，因为主服务在加载子服务的时候 container是已经存在的，所以子服务挂载的位置应该是 container中包含的id为app的容器，因为如果是多页签页面可能存在多个#app,所以一定要指定是 container中的id为app的容器
解决方案
app.mount(container ? container.querySelector("#app") : "#app")
[qiankun] lifecycle not found from xxx-web entry exports, fallback to get from window[ ‘xxx-web’]
现象描述
该现象是微服务正常加载后出现的问题，也就说，除了多了该条警告信息，对于微服务的展示与加载没有其它影响，即使不处理也没有什么问题，但是该提示让强迫症的我有点纠结，还是找了找解决方案，不介意的话是可以跳过该问题的
解决方案
看到有说是因为注入的入口js文件，在html中不是最后的script标签导致的。
qiankun是通过html中的最后一个script文件，获取qiankun的生命周期，所以如果最后一个不是入口js文件就拿不到生命周期。看了一下本人的index.html文件，发现确实在injected后存在手动引入了一个js文件的现象，是不是该文件导致的？将该文件移到了head标签中引入，然后发现该警告问题消失了？！！！
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><% if (htmlWebpackPlugin.options.online) {%><script type="text/javascript" src="<%= BASE_URL %>config.js"></script><% } %><title>xxx-web</title></head>
<body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected 打包后的注入文件添加到此处-->
</body></html>
App has already been mounted
微服务二次加载,该问题主要是微服务是否曾经加载过,并且页面不会在某些情况下重新渲染
App has already been mounted.
If you want to remount the same app, move your app creation logic into a factory function and create fresh app instances for each mount - e.g. const createMyApp = () => createApp(App)
开始以为是路由缓存keep-alive的问题，去除路由缓存，尝试了多次都仍然存在问题，包括最上方的资源已注册问题，最后发现最根本的原因是因为路由发生变化的时候，没有卸载微服务
vue3.x的卸载方法
app.unmount();app = null;router = null;
其它遇到的一些微服务问题，因为内容篇幅较长，会分出来
[qiankun]实战问题汇总相关推荐
- R语言单变量分析实战：汇总统计（Summary Statistics）、频率表（Frequency Table）、图表（charts: boxplot、histogram、density）
R语言单变量分析实战:汇总统计(Summary Statistics).频率表(Frequency Table).图表(charts: boxplot.histogram.density) 目录
- IDA PRO 静态反汇编与OllyDbg动态调试实战技巧汇总
IDA PRO 静态反汇编与OllyDbg动态调试实战技巧汇总 ********************************** 案例一: 使用IDA PRO+OllyDbg+PEview 追踪w ...
- JNA实战笔记汇总一 简单认识JNA|成功调用JNA
一.简介 先说JNI(Java Native Interface)吧,有过不同语言间通信经历的一般都知道,它允许Java代码和其他语言(尤其C/C++)写的代码进行交互,只要遵守调用约定即可.首先看下 ...
- 【大数据AI人工智能】大数据处理实战案例汇总
大数据处理实战案例汇总 本文总结了一系列大数据处理相关的实战案例,让你一目了然地了解大数据处理技术. 文章目录 大数据处理实战案例汇总 1. 谷歌搜索引擎 2. Facebook实时动态 3. Net ...
- JNA实战笔记汇总（一）—— JNA简介及demo环境创建
目录 1.简介 2.原理 3.配置环境,创建demo 3.1 搞清楚.dll/.so文件适用环境 3.2 创建一个普通的maven项目 3.2.1 将.dll/.so文件放在resources根路径下 ...
- rocketmq 实战问题汇总
rocketmq 实战过程会遇到这样或者那样的问题,今天我们专门抽出一篇文章来分析一下汇总一下,避免以后踩同样的坑: 1.找不到JDK的问题: 综合分析,是因为JDK安装的目录有空格导致的:Progr ...
- 实战案例汇总，Java架构师实战视频教程
很多人想进阶Java架构师,但确找不到正确的学习方法和资料,一直停留在原地,很是困惑.别慌,经过小编不懈的努力,终于为大家找到了这套最新最简洁最系统的进阶Java架构师的自学教程. 本教程资料通过真实 ...
- Android 实战项目汇总
功能性 学习性 android-oss 全球最大的众筹平台之一,有单元测试.自动化测试.自动化打包.持续集成等方面的经验 给大家推荐10个优秀的开源项目 开发经验 记录一次解决安装 Apk 兼容性问题 ...
- JNA实战笔记汇总（二）——JNA和C / C ++的数据类型映射（dll函数回调、结构体、指针）
目录 JNA技术难点 1.函数回调 2.结构体 3.指针 JNA技术难点 有过跨平台.跨语言开发的程序员都知道,跨平台.预研调用的难点,就是不同语言之间数据类型不一致造成的问题.绝大部分跨平台调用的失 ...
最新文章
- 多线程 Thread类
- java and asp.net
- Struts2对象属性驱动
- oracle无法解析连接符,oracle无法解析连接字符串，请教
- python 怎么安装电脑摄像头模块_Python模块及安装
- 【BUG记录】在onCreate()方法handler调用方法导致程序闪退
- 【牛客 - 330C】Applese 走迷宫（bfs）
- 乐视网被列入经营异常名录 因登记经营场所无法联系
- 单片机与普通微型计算机的不同之处是什么,单片机与普通微型计算机的不同之处...
- LeetCode OJ - Longest Substring Without Repeating Characters
- java编译程序文件为_编译Java源程序文件后将产生相应的可执行字节码文件，这些文件的扩展名为（ ）。...
- Repast Statecharts
- JavaScript函数 思维导图
- 秃头程序员保姆教程：Spring框架自学之路(一)
- 华为鸿蒙新机是哪款,华为新机来了！预装鸿蒙 OS，搭载麒麟 9000！
- 改变控制台字体的大小
- SRS源码阅读（一）
- 胆结石饮食有什么禁忌？4类食物要少吃
- 第五章语言模型：n-gram
- 如何查看域名所对应的证书有效期？