问题1：子应用加载的资源会 404

子应用是webpack项目

官方参考：

qiankun.umijs.org/zh/faq#%E4%…

www.webpackjs.com/configurati…

解决方案：

在子应用项目根目录下创建public-path.js文件，文件内容如下：


// 解决子应用加载资源404
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line 
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  }

在项目入口文件中引入这个文件。

子应用是vite项目

在vite配置文件-服务器选项下增加origin配置。

server.origin 用于定义开发调试阶段生成资源的origin。

问题2: 子应用devServer中的websocket连接报错：Invalid Host/Origin header

解决方案

在子应用的vue-cli的配置中增加如下内容：

子应用样式丢失

原因：错误的将子应用挂载到了container指定的节点上，正确的是将子应用挂载到container指定的节点下的#app节点上。

错误代码

function render(props = {}) {
  const { container } = props
  instance = createApp(App).mount(container? container : '#app')
}

正确代码

function render(props = {}) {
  const { container } = props
  instance = createApp(App).mount(container? container.querySelector('#app') : '#app')
}

问题3: Cannot GET /__vite_ping

vite子应用请求https://www.ysg.com:3001/__vite_ping变成了https://www.ysg.com:8088/__vite_ping（8088是主应用的端口， 3001是子应用的端口）

子应用何时会发起请求`https://www.ysg.com:3001/__vite_ping`？

浏览器与vite的开发服务器建立websocket连接，当浏览器监听到close事件，就会通过fetch发起https://www.ysg.com:3001/__vite_ping请求，该请求是用来判断开发服务器是否正常。下面截图是源码实现。源码中fetch请求的url有一个变量base。

url中的base是怎么赋值的呢？

vite内部加入的插件中，clientInjectionsPlugin插件是专门解析ws client文件的，作用就是直接替换掉ws client文件里创建ws 客户端所需要的变量。

从上面的源码中分析出， base变量是从config.base中获取的，我已经在vite的配置文件增加了base的配置项base:https://www.ysg.com:3001，但调试到这里的时候， base依旧是/。

调试下config.base的生成逻辑

从源码中分析得到，不是build构建，则config.base不能使用链接。官方文档也有这个描述，如下截图。

最终的解决办法

子应用vite配置设置base为/vue3-element-admin，此时子应用的首页地址https://www.ysg.com:3001/#/home变成了https://www.ysg.com:3001/vue3-element-admin/#/home。
主应用设置webpack配置设置proxy代理如下：

此时，当子应用开发服务器中断时，子应用发起https://www.ysg.com:8088//vue3-element-admin/__vite_ping就会代理到https://www.ysg.com:3001//vue3-element-admin/__vite_ping。

qiankun实战踩坑记