一个网站网站建设下来要花多少钱国外木屋建设网站

当前位置： 首页 > news >正文

一个网站网站建设下来要花多少钱,国外木屋建设网站,网络商城如何推广,做网站如何自己寻找客户[qiankun]实战问题汇总ERROR SyntaxError: Cannot use import statement outside a module问题分析解决方案子应用命名问题问题分析解决方案jsonpFunction详细错误信息问题分析解决方案微应用的注册问题Uncaught Error: application cli5-beta6-test-name died in status LOADI… [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_URLSCHEME]: 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 idmicro/divregisterMicroApps([{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, templatediv idnavrouter-link to/Home/router-link |router-link to/cliChildAbout/router-link/div /template子应用App.vue是以下内容的 templatediv idrootmycontentrouter-view v-slot{ Component }transition namerouter-fade modeout-inkeep-alivecomponent :isComponent//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 langenheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0% if (htmlWebpackPlugin.options.online) {%script typetext/javascript src% BASE_URL %config.js/script% } %titlexxx-web/title/head bodynoscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled.Please enable it to continue./strong/noscriptdiv idapp/div!– built files will be auto injected 打包后的注入文件添加到此处– /body/htmlApp 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;其它遇到的一些微服务问题因为内容篇幅较长会分出来