主要是在qiankun的实现过程中遇到的各种的问题，这里做一个汇总，方便以后的查阅
该问题是在子应用中通过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}应该相同否则加载存在问题
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}`
}
主要是该段代码导致的
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" : "")
在修复上面那个问题后，就出现了这个警告，这个警告很是奇怪，我只是希望设置路由时添加前缀 #/micro/sonApplicationPrefix,但是就多了上面的警告信息
该报错发生在我想多次注册统一名称的微服务的时候。某个微服务下可能存在多个路由页面，这些路由页面都希望能够被主应用中作为菜单加载，这就导致了同一个微服务被多次注册的现象（因为多个路由页面的微服务dns是相同的）
因为是多个微服务注册发生的，所以要避免微服务的多次注册。在注册微服务之前我们要把同一个微服务的注册项过滤掉，因为该微服务只要注册过一次，当我们访问该微服务的其它路由页面的时候，会根据路径自动触发之前注册过的该微服务
微服务挂载过程中，有一个微服务页面总是无法正常挂载，但是在该路由页面直接刷新页面的时候又正常挂载了，经过对比分析发现是微服务的渲染函数中，这一行代码导致的，这一行代码被写成了:
app.mount(container ? "#app" : "#app")
微服务挂载的时候是根据主服务传递的 container 进行挂载的，因为 container是指定的主服务的容器，而#app则是子服务单独运行的挂载容器，因为主服务在加载子服务的时候 container是已经存在的，所以子服务挂载的位置应该是 container中包含的id为app的容器，因为如果是多页签页面可能存在多个#app,所以一定要指定是 container中的id为app的容器
app.mount(container ? container.querySelector("#app") : "#app")
该现象是微服务正常加载后出现的问题，也就说，除了多了该条警告信息，对于微服务的展示与加载没有其它影响，即使不处理也没有什么问题，但是该提示让强迫症的我有点纠结，还是找了找解决方案，不介意的话是可以跳过该问题的
看到有说是因为注入的入口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.
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;
其它遇到的一些微服务问题，因为内容篇幅较长，会分出来