qiankun 路由加载404 的情况及碰到的问题
qiankun 是一个基于 single-spa 的微前端实现库 官方文档 它的使用及介绍在官方有详细的文档说明,我这主要记录下 开发中遇到的问题,
1.关于 路由 加载404 的问题
使用component: ()=>import('../views/About')
的方法来进行加载 会出现ChunkLoadError: Loading chunk 0 failed
打包后出现404的情况
//需要把 router push重写下 //处理 路由懒加载异常错误处理, const originalPush = Router.prototype.push Router.prototype.push = function push(originalPush) { console.log(originalPush) return originalPush.call(this, location).catch((err) => { return err }) }
2.子应用 处理 资源加载问题
子应用中新建 publicPath.js 在main.js 引入
publicPath.js
/** * 此路径非常重要,否则会出现子工程懒加载出现ChunkLoadError: Loading chunk 0 failed的错误 * 还有,下面的注释不能删除 */ import * as config from '../vue.config' //获取devServer 的配置 便于统一 (function () { if (window.__POWERED_BY_QIANKUN__) { //__POWERED_BY_QIANKUN__ 使用qiankun 初始化的属性 if (process.env.NODE_ENV === 'development') { // eslint-disable-next-line __webpack_public_path__ = `//localhost:${config.devServer.port}${config.publicPath}` return } // eslint-disable-next-line __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ } })()
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通