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/访问。