2023年6月21日发(作者：)
微前端问题汇总前⾔微前端是搭建起来了，但是要⽤起来啊，把原来的⼏个项⽬集成进来的过程遇到问题总结。零、沙箱设置的简单理解strictStyleIsolation = false可以获取到⼦应⽤的dom节点，主应⽤可修改⼦应⽤样式，但是⼦应⽤不可修改主应⽤的样式。需要注意样式不能冲突。strictStyleIsolation = true样式严格分离，不可获取到⼦应⽤的dom节点。⼀、vue-cli2搭建的⽼项⽬微应⽤配置1.1、打包配置：webpack配置在哪呢熟读官⽅⽂档发现，打包配置为了让主应⽤能识别⼦应⽤暴露出来的信息，⼦应⽤打包需要进⾏的配置。关键词：⼦应⽤、打包、暴露那可不是在⼦应⽤的webpack中配置output，因为run dev和run build都需要对外暴露吧，那就是配置到咯？打开⼀看果然原来就有output属性。于是追加const packageName = require('../').name;library: `${packageName}-[name]`,libraryTarget: 'umd',jsonpFunction: `webpackJsonp_${packageName}`,即可。此处注意，官⽅⽂档require('./').name;,此处根据项⽬⽂件位置应该是require('../').name;多了⼀层配置正确后，运⾏npm run dev成功启动项⽬。发现单独访问可以，但是通过主应⽤访问报跨域的错误提⽰。需要查看跨域配置是否正确。1.2、跨域配置：你以为在config/下的dev⾥⾯吗？不是的⽣产环境的跨域是在nginx中进⾏配置，那开发环境的跨域就是在中咯。打开⽂件⼀看果然有个devServer属性，于是在其下添加配置项：headers: { 'Access-Control-Allow-Origin': '*'},即可。1.3、附webpack官⽅⽂档：⼆、res中⽆法拿到router对象在js⽂件⽐如axios的返回拦截res中⽆法拿到router对象进⾏路由跳转挂到原⽣⽅法上即可。if (!window.__POWERED_BY_QIANKUN__) { render() ype.$subRouter = router}ype.$({ name: 'Login', params: { message: e } })引申问题：此时是独⽴渲染的时候，把路由挂在了原⽣上，但是以⼦应⽤嵌⼊微前端时。⼦应⽤在请求返回res中得知超时，需要跳转登录界⾯，是⽆法拿到原⽣router的，只能通知主应⽤，进⾏路由跳转。详见⽗⼦应⽤间的监听传值。（下⼀个问题）三、⽗⼦应⽤通过props传值问题：⼦系统登录超时res跳转不了登录界⾯，需要通知主应⽤进⾏跳转。解决：建议⽤props传值处理。主应⽤注册⼦应⽤{ name: 'XxxSubSystem', entry: '//10.10.26.197:8091', container: '#container', activeRule: '/test/xxx-sub-system', props: { // 额外参数-⽤于⽗⼦应⽤之间相互调⽤ getToken: () => { ('获取token') }, reRegister: (message) => { ({ name: 'Login', params: { message: message } }) ('重新登录') } } },⼦应⽤挂载⽅法function render (props = {}) { const { container } = props router = new VueRouter({ base: window.__POWERED_BY_QIANKUN__ ? '/test/xxx-sub-system/' : '/', mode: 'history', routes }) instance = new Vue({ router, store, render: h => h(App) }).$mount(container ? elector('#app') : '#app') // 将主应⽤的函数挂到原⽣上⽅便调⽤ ype.$baseReRegister = ster ype.$baseGetToken = en}⼦应⽤接⼝返回res/超时拦截if (errCode === 401) { if (!window.__POWERED_BY_QIANKUN__) { ype.$({ name: 'Login', params: { message: e } }) } else { ype.$baseReRegister(e) }}四、来回切换⼦应⽤容易崩了报错：application ‘SubPhm’ died in status SKIP_BECAUSE_BROKEN: Cannot read property ‘replace’ of undefined现象：div=container的节点存在，⼦应⽤挂上去了；但是加载失败，⼦应⽤挂上了，但是挂了。原因分析：来回切换⼦系统的时候，id为container的DOM节点不断的进⾏结构渲染导致的崩溃。原来⼦应⽤直接挂在app中的div，切换应⽤时，整个dom重新渲染。改造⽅法：将⼦应⽤挂到⼦路由下⾯，路由跳转时中的部分肯定是要重新渲染的，所以⼦应⽤切换时，也只是渲染路由部分，保持了外层不动，减轻浏览器重绘压⼒。详见下⼀点，如何将⼦应⽤挂在⼦路由下。五、如何将⼦应⽤挂在⼦路由下改造前：主应⽤ 主应⽤t routes = [ { path: '/', name: 'Default', redirect: '/login' }, { path: '/login', name: 'Login', component: Login }, { path: '/app', name: 'App', component: App }]主应⽤{ name: 'SubSystem', entry: '//IP:PORT', container: '#container', activeRule: '/sub-system' },⼦应⽤er = new VueRouter({ base: window.__POWERED_BY_QIANKUN__ ? '/sub-system/' : '/', mode: 'history', routes })改造后：主应⽤ ……主应⽤ 主应⽤t routes = [ { path: '/', name: 'Default', redirect: '/login' }, { path: '/login', name: 'Login', component: Login }, { path: '/basesub/*', name: 'BaseSub', component: BaseSub, children: [ ] }, { path: '/app', name: 'App', component: App }]主应⽤{ name: 'SubSystem', entry: '//IP:PORT', container: '#container', activeRule: '/basesub/sub-system' },⼦应⽤er = new VueRouter({ base: window.__POWERED_BY_QIANKUN__ ? '/ basesub/sub-system/' : '/', mode: 'history', routes })六、图⽚静态⽂件的引⽤问题：在static下的需要⼿动加上⼦应⽤IP和端⼝，webpack打包只给相对路径src下的资源加上了。建议：将静态资源，如CSS、图⽚、JS代码放置在src⽂件夹⾥⾯，这样才会受publicPath的打包路径⾃动配置__webpack_public_path__。七、iconfont需要在主应⽤引⼊？iconfont需要在主应⽤引⼊，否则⽆法加载出图标。但是本⼈并没有遇到此现象，原来以为图标有问题，并不是iconfont的问题。⼋、el-icon显⽰异常问题：两个⼦系统，element查看节点⼀模⼀样。但是显⽰效果⼀个能显⽰出.el-icon-arrow-down的图标，⼀个⽆法显⽰。解决：起初以为是iconfont图标引⼊的问题，后来发现这是el-icon啊。于是注释掉⼦应⽤的如下引⼊，就能正常显⽰了。// import ‘element-ui/lib/theme-chalk/’但此时单独运⾏⼦应⽤时，整个element-ui的样式结构就乱了。于是查看主应⽤和⼦应⽤的element-ui版本，果然主应⽤和正常⼦应⽤的版本远远⾼于问题⼦应⽤的版本，所以升级问题⼦应⽤的element-ui版本即可。由此可得，主应⽤的CSS样式尽可能的⾃⼰⼿写，避免使⽤⼀些UI框架后，样式与微应⽤的产⽣冲突。九、主⼦应⽤登录问题问题：1、 主⼦应⽤不共⽤同⼀套后台登录。2、 主⼦应⽤共⽤⼀套后台登录。解决：（两套登录）访问⼦系统login页⾯，写死⽤户名密码登录跳转，使⽤的token都是⼦应⽤⾃⼰的。解决：（⼀套登录）1、 主应⽤直接访问⼦应⽤的home界⾯，不访问login登录界⾯了。 系统
2、 主应⽤注册⼦应⽤，添加token同步⽅法。{ name: 'XxxSubSystem', entry: '//10.10.26.197:8091', container: '#container', activeRule: '/xxxyx/xxx-sub-system', props: { // 额外参数-⽤于⽗⼦应⽤之间相互调⽤ getToken: (subKey) => { const yxtoken = m('XXXYX_TOKEN') const yxuser = m('XXXYX_USER') m(subKey + '_TOKEN', yxtoken) m(subKey + '_USER', yxuser) }, reRegister: (message) => { ({ name: 'Login', params: { message: message } }) ('重新登录') } } },3、 启动⼦应⽤时主动获取主应⽤的token和userexport async function mount (props) { ('[vue] props from main framework', props) // 将主应⽤的函数挂到原⽣上⽅便调⽤ ype.$baseReRegister = ster // 设置公共变量为微前端开启 n = true // 获取主应⽤的token存为⼰⽤ en('XXXCA') // m('', ) render(props)}⼗、element-ui挂到外层body上问题：element-ui中，收缩的菜单挂在了外⾯的body下，导致样式各种不对。所以凡是挂在外层body下的样式需要去主应⽤写⼀遍。解决：主应⽤的CSS样式尽可能的⾃⼰⼿写，避免使⽤⼀些UI框架后，样式与微应⽤的产⽣冲突。还是有问题：凡是⼦应⽤使⽤了el-menu的vertical形式，挂在了body外层，⽽样式控制不到外层，导致挂在外层的菜单样式还是不受控啊。最终解决⽅案：1、⾸先站在主应⽤不使⽤ui框架的基础上，另外如果简单地icon、message这些⽆所谓，只要⼦应⽤不去修改这些样式就⾏。2、监听路由的变化，判断是哪个⼦系统，给body绑上对应的样式名称。watch: { $route: { handler: function (val) { if (f('sub-system') !== -1) { ame = 'sub-system' } else if (f('sub-phm') !== -1) { ame = 'sub-phm' } }, immediate: true } },3、针对每套⼦系统引⼊⼀个样式⽂件，仅控制改⼦系统下的样式。@import "./assets/css/subs/";@import "./assets/css/subs/";// ⽂件内容如下：.sub-phm { .el-menu { border-right: 1px solid #01e4fd; }……}// ⽂件内容如下：.sub-system { .el-menu--collapse { width: 220px; }……}⼗⼀、第三⽅引⼊-⾼德地图报错：## modules?v=1.4.15&key=5211f0aad4612e1ff705395b665bf085&vrs=16&m=mouse,vectorlayer,overlay,wgl,lBar,vectorlayer,wgl,Layer,rbush,Map3D,ctSearch,sync:1 Uncaught ReferenceError: _jsload_ is not defined解决：估计是⼦应⽤引⼊地图时⽆法往window上挂_jsload_函数，以⾄于需要使⽤时报错。需要在主应⽤引⼊⾼德地图即可。主应⽤若不使⽤，⽆需定义全局变量Amap。s = { configureWebpack: { // 全局常量定义 // externals: { // AMap: 'AMap' // ⾼德地图 // } }}需要注意的是，如果⼦应⽤引⼊了⾼德地图，通过主应⽤加载⼦应⽤会挂掉，需要在引⼊⾼德地图时加上ignore标识。⼗⼆、第三⽅引⼊-ces地图报错：[Vue warn]: Error in mounted hook: "ReferenceError: Cesium is not defined"因为Cesium的包没有正常引⼊解决（步骤）：原本这么引⼊：在中使⽤$Path是⽆效的，通过浏览器可见。所以⼦应⽤只能如下引⼊：此时⼦应⽤单独访问，使⽤ces地图正常，但是嵌⼊到微前端框架中继续报错：Uncaught Error: application 'XxxSubCa' died in status LOADING_SOURCE_CODE: [qiankun] You need to export lifecycle functions in XxxSubCa entry⼦应⽤直接挂了，只好注释掉如上引⼊，好⽍⼦应⽤能正常挂载，但是报错如下：[Vue warn]: Error in mounted hook: "ReferenceError: Cesium is not defined"⼜回到了Cesium未定义，因为包没引⼊啊，只好在主应⽤引⼊⼀遍即可。代码：⼦应⽤注释掉Cesium引⼊：主应⽤引⼊Cesium：不要忘了把包拷到主应⽤的静态⽂件夹下！⼗三、embed嵌⼊多媒体可以⼿动追加⼦应⽤的IP和端⼝，加载资源。问题：⽆法绑定点击事件，因为获取不到⼦应⽤dom。需要在element展开embed点击document节点才能通过ID获取其下节点。现象：1、 改造路由以后也不可以。2、 潮安⼦系统、地铁⼦系统凡是embed标签引⼊的SVG效果⼀样，直接复制进来的SVG可任意获取节点。3、 和SVG的⼤⼩⽆关，删除到120kb的SVG也⽆法获取节点。4、 尝试了其他SVG引⼊⽅式⽐如标签都不可以结论：MapInit () { const self = this = mentById('svg2').getSVGDocument() (mentById('svg2'), 111) (, 222) if ( === null) { clearTimeout(gDoc) gDoc = setTimeout(() => { t() }, 1000) } else { }}凡是直接通过根⽬录去外联.svg⽂件的，虽然初次获取不到embed⾥⾯的svg，等加载完后还是可以获取到的。但是通过跨域的形式外联.svg⽂件的，虽然⽂件能够加载，但是. getSVGDocument()⽅法⽆法获取embed下的svg节点。此时单独访问⼦应⽤，未拼接ip:port直接从static⽂件夹下外联svg⽂件，是可以正常获取embed下的svg节点的。此时直接在主应⽤中外联的svg⽂件，也是正常的，因为没有跨域。总⽽⾔之 跨域外联的svg，是⽆法获取embed下的svg⽂件的。解决：将⼦应⽤需要外联的SVG拷贝到主应⽤相同的⽂件位置存放即可。⼗四、接⼝调⽤的问题原问题：⼦应⽤调⽤接⼝时，因为请求的源是主应⽤的IP:PORT，导致请求拦截需要配置到主应⽤下，且不能和主应⽤的拦截发⽣冲突。问题（拦截配置在主应⽤）：1、 需要保证⼦应⽤的拦截和主应⽤的拦截不冲突。2、 所有的请求处理都是经过主应⽤，导致主应⽤的压⼒很⼤。3、 部署时，若⼦应⽤接⼝调⽤修改，也需要重新配置主应⽤并重启。4、 若⼦应⽤的后台和主应⽤的前端不在同⼀⽹段，则主应⽤是⽆法调通⼦应⽤的后台接⼝的。所以，不可将拦截配置在主应⽤中。问题（拦截配置在各⾃应⽤）：通过⼦应⽤的拦截，需要追加⼦应⽤的IP:PORT，导致浏览器存在跨域的提⽰，⽆法正常调⽤接⼝。通过network可以看到，浏览器⾸先发了个options的请求去试探后台 ，后台因为没有允许跨域，于是返回了403，那原本的post请求就不会继续。解决思路：1、 后台允许跨域2、 前端将options的返回403强制改成204，继续后续请求操作。3、 绕过options不让浏览器发送试探的请求。解决办法：1、 后台修改，允许跨域，或者处理所有options请求返回200。优点：简单缺点：不安全，且需要后台配合修改代码。2、 避免“OPTIONS”请求，需要前后请求的头部保持⼀致。优点：⽆缺点：需要前后端配合，⼀旦出现特殊请求需要特殊处理（⽐如附件下载等类型不同的请求）3、 避免“OPTIONS”请求，需要将请求改造成简单请求。因为我们的请求默认为json格式，是⾮简单请求，如果将请求类型设置成application/x-www-form-urlencoded，改造成简单请求，就能避免发送“OPTIONS”请求。优点：⽆缺点：同上，需要前后端配合，特殊情况需要特殊处理。4、 前端处理优点：简单缺点：仅限nginx部署时能达到效果，本地开发配置⽆解。
2023年6月21日发(作者：)
微前端问题汇总前⾔微前端是搭建起来了，但是要⽤起来啊，把原来的⼏个项⽬集成进来的过程遇到问题总结。零、沙箱设置的简单理解strictStyleIsolation = false可以获取到⼦应⽤的dom节点，主应⽤可修改⼦应⽤样式，但是⼦应⽤不可修改主应⽤的样式。需要注意样式不能冲突。strictStyleIsolation = true样式严格分离，不可获取到⼦应⽤的dom节点。⼀、vue-cli2搭建的⽼项⽬微应⽤配置1.1、打包配置：webpack配置在哪呢熟读官⽅⽂档发现，打包配置为了让主应⽤能识别⼦应⽤暴露出来的信息，⼦应⽤打包需要进⾏的配置。关键词：⼦应⽤、打包、暴露那可不是在⼦应⽤的webpack中配置output，因为run dev和run build都需要对外暴露吧，那就是配置到咯？打开⼀看果然原来就有output属性。于是追加const packageName = require('../').name;library: `${packageName}-[name]`,libraryTarget: 'umd',jsonpFunction: `webpackJsonp_${packageName}`,即可。此处注意，官⽅⽂档require('./').name;,此处根据项⽬⽂件位置应该是require('../').name;多了⼀层配置正确后，运⾏npm run dev成功启动项⽬。发现单独访问可以，但是通过主应⽤访问报跨域的错误提⽰。需要查看跨域配置是否正确。1.2、跨域配置：你以为在config/下的dev⾥⾯吗？不是的⽣产环境的跨域是在nginx中进⾏配置，那开发环境的跨域就是在中咯。打开⽂件⼀看果然有个devServer属性，于是在其下添加配置项：headers: { 'Access-Control-Allow-Origin': '*'},即可。1.3、附webpack官⽅⽂档：⼆、res中⽆法拿到router对象在js⽂件⽐如axios的返回拦截res中⽆法拿到router对象进⾏路由跳转挂到原⽣⽅法上即可。if (!window.__POWERED_BY_QIANKUN__) { render() ype.$subRouter = router}ype.$({ name: 'Login', params: { message: e } })引申问题：此时是独⽴渲染的时候，把路由挂在了原⽣上，但是以⼦应⽤嵌⼊微前端时。⼦应⽤在请求返回res中得知超时，需要跳转登录界⾯，是⽆法拿到原⽣router的，只能通知主应⽤，进⾏路由跳转。详见⽗⼦应⽤间的监听传值。（下⼀个问题）三、⽗⼦应⽤通过props传值问题：⼦系统登录超时res跳转不了登录界⾯，需要通知主应⽤进⾏跳转。解决：建议⽤props传值处理。主应⽤注册⼦应⽤{ name: 'XxxSubSystem', entry: '//10.10.26.197:8091', container: '#container', activeRule: '/test/xxx-sub-system', props: { // 额外参数-⽤于⽗⼦应⽤之间相互调⽤ getToken: () => { ('获取token') }, reRegister: (message) => { ({ name: 'Login', params: { message: message } }) ('重新登录') } } },⼦应⽤挂载⽅法function render (props = {}) { const { container } = props router = new VueRouter({ base: window.__POWERED_BY_QIANKUN__ ? '/test/xxx-sub-system/' : '/', mode: 'history', routes }) instance = new Vue({ router, store, render: h => h(App) }).$mount(container ? elector('#app') : '#app') // 将主应⽤的函数挂到原⽣上⽅便调⽤ ype.$baseReRegister = ster ype.$baseGetToken = en}⼦应⽤接⼝返回res/超时拦截if (errCode === 401) { if (!window.__POWERED_BY_QIANKUN__) { ype.$({ name: 'Login', params: { message: e } }) } else { ype.$baseReRegister(e) }}四、来回切换⼦应⽤容易崩了报错：application ‘SubPhm’ died in status SKIP_BECAUSE_BROKEN: Cannot read property ‘replace’ of undefined现象：div=container的节点存在，⼦应⽤挂上去了；但是加载失败，⼦应⽤挂上了，但是挂了。原因分析：来回切换⼦系统的时候，id为container的DOM节点不断的进⾏结构渲染导致的崩溃。原来⼦应⽤直接挂在app中的div，切换应⽤时，整个dom重新渲染。改造⽅法：将⼦应⽤挂到⼦路由下⾯，路由跳转时中的部分肯定是要重新渲染的，所以⼦应⽤切换时，也只是渲染路由部分，保持了外层不动，减轻浏览器重绘压⼒。详见下⼀点，如何将⼦应⽤挂在⼦路由下。五、如何将⼦应⽤挂在⼦路由下改造前：主应⽤ 主应⽤t routes = [ { path: '/', name: 'Default', redirect: '/login' }, { path: '/login', name: 'Login', component: Login }, { path: '/app', name: 'App', component: App }]主应⽤{ name: 'SubSystem', entry: '//IP:PORT', container: '#container', activeRule: '/sub-system' },⼦应⽤er = new VueRouter({ base: window.__POWERED_BY_QIANKUN__ ? '/sub-system/' : '/', mode: 'history', routes })改造后：主应⽤ ……主应⽤ 主应⽤t routes = [ { path: '/', name: 'Default', redirect: '/login' }, { path: '/login', name: 'Login', component: Login }, { path: '/basesub/*', name: 'BaseSub', component: BaseSub, children: [ ] }, { path: '/app', name: 'App', component: App }]主应⽤{ name: 'SubSystem', entry: '//IP:PORT', container: '#container', activeRule: '/basesub/sub-system' },⼦应⽤er = new VueRouter({ base: window.__POWERED_BY_QIANKUN__ ? '/ basesub/sub-system/' : '/', mode: 'history', routes })六、图⽚静态⽂件的引⽤问题：在static下的需要⼿动加上⼦应⽤IP和端⼝，webpack打包只给相对路径src下的资源加上了。建议：将静态资源，如CSS、图⽚、JS代码放置在src⽂件夹⾥⾯，这样才会受publicPath的打包路径⾃动配置__webpack_public_path__。七、iconfont需要在主应⽤引⼊？iconfont需要在主应⽤引⼊，否则⽆法加载出图标。但是本⼈并没有遇到此现象，原来以为图标有问题，并不是iconfont的问题。⼋、el-icon显⽰异常问题：两个⼦系统，element查看节点⼀模⼀样。但是显⽰效果⼀个能显⽰出.el-icon-arrow-down的图标，⼀个⽆法显⽰。解决：起初以为是iconfont图标引⼊的问题，后来发现这是el-icon啊。于是注释掉⼦应⽤的如下引⼊，就能正常显⽰了。// import ‘element-ui/lib/theme-chalk/’但此时单独运⾏⼦应⽤时，整个element-ui的样式结构就乱了。于是查看主应⽤和⼦应⽤的element-ui版本，果然主应⽤和正常⼦应⽤的版本远远⾼于问题⼦应⽤的版本，所以升级问题⼦应⽤的element-ui版本即可。由此可得，主应⽤的CSS样式尽可能的⾃⼰⼿写，避免使⽤⼀些UI框架后，样式与微应⽤的产⽣冲突。九、主⼦应⽤登录问题问题：1、 主⼦应⽤不共⽤同⼀套后台登录。2、 主⼦应⽤共⽤⼀套后台登录。解决：（两套登录）访问⼦系统login页⾯，写死⽤户名密码登录跳转，使⽤的token都是⼦应⽤⾃⼰的。解决：（⼀套登录）1、 主应⽤直接访问⼦应⽤的home界⾯，不访问login登录界⾯了。 系统
2、 主应⽤注册⼦应⽤，添加token同步⽅法。{ name: 'XxxSubSystem', entry: '//10.10.26.197:8091', container: '#container', activeRule: '/xxxyx/xxx-sub-system', props: { // 额外参数-⽤于⽗⼦应⽤之间相互调⽤ getToken: (subKey) => { const yxtoken = m('XXXYX_TOKEN') const yxuser = m('XXXYX_USER') m(subKey + '_TOKEN', yxtoken) m(subKey + '_USER', yxuser) }, reRegister: (message) => { ({ name: 'Login', params: { message: message } }) ('重新登录') } } },3、 启动⼦应⽤时主动获取主应⽤的token和userexport async function mount (props) { ('[vue] props from main framework', props) // 将主应⽤的函数挂到原⽣上⽅便调⽤ ype.$baseReRegister = ster // 设置公共变量为微前端开启 n = true // 获取主应⽤的token存为⼰⽤ en('XXXCA') // m('', ) render(props)}⼗、element-ui挂到外层body上问题：element-ui中，收缩的菜单挂在了外⾯的body下，导致样式各种不对。所以凡是挂在外层body下的样式需要去主应⽤写⼀遍。解决：主应⽤的CSS样式尽可能的⾃⼰⼿写，避免使⽤⼀些UI框架后，样式与微应⽤的产⽣冲突。还是有问题：凡是⼦应⽤使⽤了el-menu的vertical形式，挂在了body外层，⽽样式控制不到外层，导致挂在外层的菜单样式还是不受控啊。最终解决⽅案：1、⾸先站在主应⽤不使⽤ui框架的基础上，另外如果简单地icon、message这些⽆所谓，只要⼦应⽤不去修改这些样式就⾏。2、监听路由的变化，判断是哪个⼦系统，给body绑上对应的样式名称。watch: { $route: { handler: function (val) { if (f('sub-system') !== -1) { ame = 'sub-system' } else if (f('sub-phm') !== -1) { ame = 'sub-phm' } }, immediate: true } },3、针对每套⼦系统引⼊⼀个样式⽂件，仅控制改⼦系统下的样式。@import "./assets/css/subs/";@import "./assets/css/subs/";// ⽂件内容如下：.sub-phm { .el-menu { border-right: 1px solid #01e4fd; }……}// ⽂件内容如下：.sub-system { .el-menu--collapse { width: 220px; }……}⼗⼀、第三⽅引⼊-⾼德地图报错：## modules?v=1.4.15&key=5211f0aad4612e1ff705395b665bf085&vrs=16&m=mouse,vectorlayer,overlay,wgl,lBar,vectorlayer,wgl,Layer,rbush,Map3D,ctSearch,sync:1 Uncaught ReferenceError: _jsload_ is not defined解决：估计是⼦应⽤引⼊地图时⽆法往window上挂_jsload_函数，以⾄于需要使⽤时报错。需要在主应⽤引⼊⾼德地图即可。主应⽤若不使⽤，⽆需定义全局变量Amap。s = { configureWebpack: { // 全局常量定义 // externals: { // AMap: 'AMap' // ⾼德地图 // } }}需要注意的是，如果⼦应⽤引⼊了⾼德地图，通过主应⽤加载⼦应⽤会挂掉，需要在引⼊⾼德地图时加上ignore标识。⼗⼆、第三⽅引⼊-ces地图报错：[Vue warn]: Error in mounted hook: "ReferenceError: Cesium is not defined"因为Cesium的包没有正常引⼊解决（步骤）：原本这么引⼊：在中使⽤$Path是⽆效的，通过浏览器可见。所以⼦应⽤只能如下引⼊：此时⼦应⽤单独访问，使⽤ces地图正常，但是嵌⼊到微前端框架中继续报错：Uncaught Error: application 'XxxSubCa' died in status LOADING_SOURCE_CODE: [qiankun] You need to export lifecycle functions in XxxSubCa entry⼦应⽤直接挂了，只好注释掉如上引⼊，好⽍⼦应⽤能正常挂载，但是报错如下：[Vue warn]: Error in mounted hook: "ReferenceError: Cesium is not defined"⼜回到了Cesium未定义，因为包没引⼊啊，只好在主应⽤引⼊⼀遍即可。代码：⼦应⽤注释掉Cesium引⼊：主应⽤引⼊Cesium：不要忘了把包拷到主应⽤的静态⽂件夹下！⼗三、embed嵌⼊多媒体可以⼿动追加⼦应⽤的IP和端⼝，加载资源。问题：⽆法绑定点击事件，因为获取不到⼦应⽤dom。需要在element展开embed点击document节点才能通过ID获取其下节点。现象：1、 改造路由以后也不可以。2、 潮安⼦系统、地铁⼦系统凡是embed标签引⼊的SVG效果⼀样，直接复制进来的SVG可任意获取节点。3、 和SVG的⼤⼩⽆关，删除到120kb的SVG也⽆法获取节点。4、 尝试了其他SVG引⼊⽅式⽐如标签都不可以结论：MapInit () { const self = this = mentById('svg2').getSVGDocument() (mentById('svg2'), 111) (, 222) if ( === null) { clearTimeout(gDoc) gDoc = setTimeout(() => { t() }, 1000) } else { }}凡是直接通过根⽬录去外联.svg⽂件的，虽然初次获取不到embed⾥⾯的svg，等加载完后还是可以获取到的。但是通过跨域的形式外联.svg⽂件的，虽然⽂件能够加载，但是. getSVGDocument()⽅法⽆法获取embed下的svg节点。此时单独访问⼦应⽤，未拼接ip:port直接从static⽂件夹下外联svg⽂件，是可以正常获取embed下的svg节点的。此时直接在主应⽤中外联的svg⽂件，也是正常的，因为没有跨域。总⽽⾔之 跨域外联的svg，是⽆法获取embed下的svg⽂件的。解决：将⼦应⽤需要外联的SVG拷贝到主应⽤相同的⽂件位置存放即可。⼗四、接⼝调⽤的问题原问题：⼦应⽤调⽤接⼝时，因为请求的源是主应⽤的IP:PORT，导致请求拦截需要配置到主应⽤下，且不能和主应⽤的拦截发⽣冲突。问题（拦截配置在主应⽤）：1、 需要保证⼦应⽤的拦截和主应⽤的拦截不冲突。2、 所有的请求处理都是经过主应⽤，导致主应⽤的压⼒很⼤。3、 部署时，若⼦应⽤接⼝调⽤修改，也需要重新配置主应⽤并重启。4、 若⼦应⽤的后台和主应⽤的前端不在同⼀⽹段，则主应⽤是⽆法调通⼦应⽤的后台接⼝的。所以，不可将拦截配置在主应⽤中。问题（拦截配置在各⾃应⽤）：通过⼦应⽤的拦截，需要追加⼦应⽤的IP:PORT，导致浏览器存在跨域的提⽰，⽆法正常调⽤接⼝。通过network可以看到，浏览器⾸先发了个options的请求去试探后台 ，后台因为没有允许跨域，于是返回了403，那原本的post请求就不会继续。解决思路：1、 后台允许跨域2、 前端将options的返回403强制改成204，继续后续请求操作。3、 绕过options不让浏览器发送试探的请求。解决办法：1、 后台修改，允许跨域，或者处理所有options请求返回200。优点：简单缺点：不安全，且需要后台配合修改代码。2、 避免“OPTIONS”请求，需要前后请求的头部保持⼀致。优点：⽆缺点：需要前后端配合，⼀旦出现特殊请求需要特殊处理（⽐如附件下载等类型不同的请求）3、 避免“OPTIONS”请求，需要将请求改造成简单请求。因为我们的请求默认为json格式，是⾮简单请求，如果将请求类型设置成application/x-www-form-urlencoded，改造成简单请求，就能避免发送“OPTIONS”请求。优点：⽆缺点：同上，需要前后端配合，特殊情况需要特殊处理。4、 前端处理优点：简单缺点：仅限nginx部署时能达到效果，本地开发配置⽆解。
发布评论