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__
}
})()
posted @   xiao旭  阅读(3884)  评论(0编辑  收藏  举报
编辑推荐:
· 基于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最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示