明明本地不会刷新,但映射到外网就会不停刷新页面。

在这里插入图片描述
百度了一篇CSDN文章:vite项目 通过外网域名访问 无限刷新 的解决办法,没有解决我的问题。

我使用的是natapp进行外网穿透。
报错信息是:WebSocket connection to 'ws://xxx.natappfree.cc:3000' failed:
在natapp 的外网穿透配置中,映射的本地host和端口是:127.0.0.1:3000
请添加图片描述
根据natapp应用的映射信息:
请添加图片描述
natapp 提供的地址,http://xxx.natappfree.cc 内已经包含了 3000 端口,而报错信息是WebSocket connection to 'ws://xxx.natappfree.cc:3000' failed:,也就是说,我们访问的地址其实是:127.0.0.1:3000:3000,页面不能正常访问导致不断刷新。

解决办法:
node_modules\vite\dist\client\client.js 中搜索 new Websocket,搜索到下图信息:
请添加图片描述
手动删除 :${__HMR_PORT__} 后,通过外网穿透地址去访问就没有不停刷新页面了。

注意:这种修改仅有临时效果,不能一劳永逸!

如果遇上下面这种情况:
删除:${__HMR_PORT__}后,手机端倒是不刷新了,但是浏览器本地开始一直刷新。
可能是以下原因:
浏览器本地用的是穿透后的地址(比如: http://xxx.natappfree.cc/)。删除 :${__HMR_PORT__}的原因是:内网穿透的地址 http://xxx.natappfree.cc/ 本身就带了3000的端口。如果本地浏览器用localhost访问,在删掉了:${__HMR_PORT__}后缺少了暴露的端口,就会因为端口错误不停刷新。
可以试试把项目的 port 改成80(http是80,https是443), 网页链接的端口也映射为80,这样就不用删掉 :${__HMR_PORT__},用http://xxx.natappfree.cc/访问。

GitHub 加速计划 / vu / vue
100
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:16 天前 )
9e887079 [skip ci] 11 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐