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