本地项目绑定自定义域名后 Chrome 无法访问的解决方法

最近本地启动一个 Vue 多页面项目，执行：

npm run dev

项目使用 Webpack Dev Server，监听 80 端口，并希望通过以下地址访问：

http://soft.fityun.cn/pages/login/index.html#/

但 Chrome 一直提示：

ERR_CONNECTION_CLOSED

一、确认 hosts 配置

在 /etc/hosts 中添加：

127.0.0.1 soft.fityun.cn

然后确认域名解析：

dscacheutil -q host -a name soft.fityun.cn

正常情况下应显示：

ip_address: 127.0.0.1

二、确认开发服务是否正常

执行：

npm run dev

项目启动后，通过命令行测试：

curl -I http://soft.fityun.cn/pages/login/index.html

如果返回：

HTTP/1.1 200 OK

说明项目和本地开发服务器都是正常的。

三、问题原因

继续测试 HTTPS：

curl -k -I https://soft.fityun.cn/pages/login/index.html

发现 HTTPS 无法连接，因为本地 Webpack Dev Server 只监听 HTTP 80 端口，没有监听 HTTPS 443 端口。

另外，Chrome 开启“使用安全 DNS”后，可能绕过本机 hosts 配置，直接解析公网 DNS，导致请求没有进入本地开发服务器。

四、Chrome 解决方法

打开：

chrome://settings/security

关闭：

使用安全 DNS

然后清理 Chrome DNS 缓存：

chrome://net-internals/#dns

点击：

Clear host cache

再打开：

chrome://net-internals/#sockets

点击：

Flush socket pools

完全退出并重新打开 Chrome，手动输入：

http://soft.fityun.cn/pages/login/index.html#/

注意必须使用 http://，不能使用 https://。

五、最终验证

http://soft.fityun.cn/...  -> 127.0.0.1 -> 200
https://soft.fityun.cn/... -> 本地没有 443 服务

因此，这类问题通常不是 Vue 代码、接口环境变量或 env.js 配置错误，而是浏览器 DNS、协议和本地端口之间不匹配导致的。

本次未修改项目代码，也没有提交 commit。