umi项目本地开发环境远程打开的问题

在使用qiankun的主应用加载子应用过程中,遇到URL指定localhost导致的本地开发环境远程访问问题。通过将getEntry中的host设置为location.hostname解决了部分问题,但出现了devScript断联提示。问题源于umi的webpack热更新模块,其socket连接地址错误地指向了localhost。深入源码发现,SOCKET_SERVER环境变量在非浏览器环境中无法获取location信息,需要在启动时明确指定包含协议、域名和端口号的子应用URL。解决方案是增强umi配置,允许独立设置socket连接端口。
摘要由CSDN通过智能技术生成
  1. qiankun主应用加载子应用时,url指定了localhost
const getEntry = (base: string, port: number) => {
  const host: string = location.hostname
  return process.env.NODE_ENV === 'development'
    ? `http://${host}:${port}${base}`
    : `${base}/index.html`
}

而getEntry是用于qiankun子应用的加载配置

export const qiankun = {
  apps: apps.map(app => {
    if (app.name === 'distributed-storage') {
      return {
        name: app.name,
        entry: `/distributed-storage-ui/`,
        activeRule: `/distributed-storage`
      }
    }
    return {
      name: app.name,
      entry: getEntry(`/${app.name}`, app.port)
    }
  }),
  routes: appRoutes,
  lifeCycles: {
    afterMount: () => {}
  },
  prefetch: !isDev
}

需要将 getEntry 里面的 host 赋值成location.hostname,修改完成之后在远程可以打开。且功能完善,
此时完成了第一步,但是打开子应用会出现d

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Manggoo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值