qiankun 子應用加載報404找不到資源文件ChunkLoadError:Loading chunk 0 failed

1、qiankun 是一個基於 single-spa 的微前端實現庫，官方文檔 

2、問題：在加載子應用靜態資源文件時，報錯js資源404獲取不到的問題，具體報錯如下：

 

 

 3、解決：

在子應用中新建publicPath.js文件，並引入到main.js中。

//publicPath.js文件：
//下面的注釋不可刪除
import * as config from '../vue.config'  //獲取devServer的配置，便於統一
(function () {
  //添加乾坤判斷
  if (window.__POWERED_BY_QIANKUN__) {
    //__POWERED_BY_QIANKUN__ 使用qiankun初始化的屬性
    if (process.env.NODE_ENV === 'development') {
      // eslint-disabled-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__
  }
})()

//main.js文件中（必須在最先引入，寫到最上面）：
import './publicPath'
import ...

這里對應的publicPath為'/'，即：

//vue.config.js文件：
const port = 7200  //dev port
const dev = process.env.NODE_ENV === 'development'

module.exports = {
  publicPath: dev ? '/' : '/routerPathName'    //這里的routerPathName按子應用路由地址的需要去配置
}

ps：

也可以直接在子應用的vue.config文件中配置其 publicPath：

//vue.config.js文件：
const port = 7200  //dev port
const dev = process.env.NODE_ENV === 'development'

module.exports = {
  publicPath: dev ? `//localhost:${port}` : '/routerPathName'    //這里的routerPathName按子應用實際路由地址去配置
}

 提醒：

  假如只是為了使用Jenkins等持續集成工具打出來的docker包可以在主域名或子域名下部署，只需要使用 相對 路徑引用資源就行，不需要使用__webpack_public_path__,__webpack_public_path__是需要在nginx啟動后動態改publicPath才用的。 

  從名字看，__webpack_public_path__是一個webpack的“私有”變量，后續會不會被改有一定的不確定性。

轉：https://www.cnblogs.com/zjxlicheng/p/15251284.html