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