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__
}
})()