umi项目本地开发环境远程打开的问题
创始人
2024-01-25 05:43:48
0
  1. qiankun主应用加载子应用时,url指定了localhost
const getEntry = (base: string, port: number) => {const host: string = location.hostnamereturn 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,修改完成之后在远程可以打开。且功能完善,
此时完成了第一步,但是打开子应用会出现devScript断联的提示。
在这里插入图片描述

可以看到在其他机器打开的页面 子应用的 devScript 脚本请求发送到了localhost
而devScript的脚本请求是由 umi 配置的webpack 热更新模块加载引起的
找到源码

function getSocketHost() {if (process.env.SOCKET_SERVER) {return stripLastSlash(process.env.SOCKET_SERVER);}let host, protocol;const scripts = document.body?.querySelectorAll?.('script') || [];const dataFromSrc = scripts[scripts.length - 1]? scripts[scripts.length - 1].getAttribute('src'): '';if (dataFromSrc && dataFromSrc.includes('umi.js')) {const urlParsed = url.parse(dataFromSrc);host = urlParsed.host;protocol = urlParsed.protocol;} else {// 某些场景可能没有 umi.js,比如微前端的场景host = location.host;protocol = location.protocol;}return host && protocol ? url.format({ host, protocol }) : '';
}

可以看到 socket 连接的地址 来源有 process.env.SOCKET_SERVER 以及 url.parse(dataFromSrc) 还有 location
我打开的是10.0.25.102的地址,所以来源不可能是location,但是主应用的socket连接是从location获取的。
ui项目中 scripts 标签也只有 umi.js 的 src 属性。所以解析出来为空。
那么localhost只能是来自 process.env.SOCKET_SERVER 这个环境变量

找到 umijs 插件源码

api.chainWebpack((memo, { webpack }) => {const port = process.env.PORT;// source-map 跨域设置if (api.env === 'development' && port) {const localHostname = process.env.USE_REMOTE_IP? address.ip(): process.env.HOST || 'localhost';const protocol = process.env.HTTPS ? 'https' : 'http';// 变更 webpack-dev-server websocket 默认监听地址process.env.SOCKET_SERVER = `${protocol}://${localHostname}:${port}/`;// 开启了 devSourceMap 配置,默认为 trueif (api.config.qiankun && api.config.qiankun.slave!.devSourceMap) {// 禁用 devtool,启用 SourceMapDevToolPluginmemo.devtool(false);memo.plugin('source-map').use(webpack.SourceMapDevToolPlugin, [{// @ts-ignorenamespace: api.pkg.name,append: `\n//# sourceMappingURL=${protocol}://${localHostname}:${port}/[url]`,filename: '[file].map',},]);}}return memo;
});

这里可以找到 process.env.SOCKET_SERVER 这个变量赋值的地方。
这里也解释了在执行yarn start的时候赋值环境变量不生效的原因。
因为热更新需要指定子应用的url,包括协议、域名、端口号。脚本执行的时候是在node环境,而非浏览器环境,此时拿不到location的信息。所以只能指定一个固定值。

根源因该是umi配置webpack socket连接的地方,没有提供只 设置 端口的自由度。

相关内容

热门资讯

创业者ppt 创业者ppt 餐...         说起PPT中出现的视频,大家可能都不陌生。很多大型会议都会用视频来渲染气氛,给人视觉...
最佳合伙人创业,10万合伙人创...   有一次例会,合伙人居然对员工说:现在先不要管老用户了,老用户已经伤得很重了,现在重点是吸引新用户...
服装专业怎样自己创业,服装界富...   在小区开服装工作室。      我从小就有一个梦想,自己开衣服。      经历了各种好的坏的事...
不填内容斜杠方向 不填内容斜杠...   有人说我们这一代人成功的概率比我们父辈低很多,因为他们父辈的时代有无数的机会。其实他们说这句话的...
穷人翻身创业路子,大众创业万众...   思考系列(34):穷人输不起?有钱人起点高?      有人说,穷人穷不是因为不够聪明不努力,而...
农村创业前景,创业致富点子大全...   2020年,农村创业者不知道做什么的时候,会有人开始流浪。过年后他们会出去打工还是在家创业?创业...
vlog文案网站 vlog文案...         乌市特色建筑      乌鲁木齐一般简称乌鲁木齐。我有幸在乌鲁木齐呆了两年。当时是因...
自己开店的计划书,商店创业计划...                                               call...
创业者必须自身具备的三种格局,...   虽然很多年轻人每天都想赚钱发财,但是到了创业的时候却不敢迈出第一步。创业成功率低的原因有很多。有...
摆摊创业,潮汕做生意 摆摊创业...   如果说美景是一个城市的外表,那美食就是一个城市的灵魂,在潮汕,周末出来逛街也能逛出一条美食街,也...