vite、vue3本地页面正常显示不刷新,外网穿透后页面不停刷新
明明本地不会刷新,但映射到外网就会不停刷新页面。

百度了一篇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/访问。
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)