LTE或无网络环境下BrowserSync无法正常工作的问题求助

我的MBP本地开发环境运行Apache，配置了动态虚拟主机，可通过http://[client_name].[project_name].localhost访问任意项目，Apache配置如下：

<Virtualhost *:80>
  VirtualDocumentRoot "/Users/mbp/repos/%1/websites/%2/public_html"
  ServerName sites.localhost
  ServerAlias *.*.localhost
  UseCanonicalName Off
  <Location /server-status>
    SetHandler server-status
    Order allow,deny
    Allow from all
  </Location>
</Virtualhost>

package.json包含client和site键值对，我在gulpfile中导入后通过pkg.client和pkg.site访问这些值：

const { default: pkg } = await import("./package.json", {
  assert: {
    type: "json",
  },
});

BrowserSync初始化代码如下：

browserSync.init({
  notify: false,
  proxy: pkg.client + '.' + pkg.site + '.localhost'
});

运行gulp后会打开http://localhost:3000，WiFi环境下一切正常，但切换到 tethered LTE（移动数据）或关闭WiFi无网络时，页面完全无法加载。我已尝试设置BrowserSync的online选项，未解决问题，且所有操作均在同一设备上进行，未尝试跨设备连接。

解决办法 #

1. 强制绑定本地回环地址 #

设备切换到移动数据时，网络接口优先级变化可能导致BrowserSync绑定到移动网络IP而非本地回环。显式指定host为localhost或127.0.0.1，并设置online: false强制离线模式：

browserSync.init({
  notify: false,
  proxy: pkg.client + '.' + pkg.site + '.localhost',
  host: 'localhost',
  online: false
});

2. 直接用IP加Host头代理 #

移动数据环境下.localhost域名解析可能失效，可直接代理到127.0.0.1并手动设置Host头匹配Apache虚拟主机：

browserSync.init({
  notify: false,
  proxy: {
    target: '127.0.0.1',
    proxyReq: [
      function(proxyReq) {
        proxyReq.setHeader('Host', `${pkg.client}.${pkg.site}.localhost`);
      }
    ]
  },
  host: 'localhost'
});

3. 固定端口并强制打开本地地址 #

指定固定端口，同时设置open: 'local'确保打开本地回环地址，避免尝试外部网络连接：

browserSync.init({
  notify: false,
  proxy: pkg.client + '.' + pkg.site + '.localhost',
  host: '127.0.0.1',
  port: 3000,
  online: false,
  open: 'local'
});

4. 确认Apache监听配置 #

确保Apache的httpd.conf中Listen 80未限制特定IP，现有虚拟主机配置<Virtualhost *:80>已满足监听所有接口的要求，无需修改，但可检查确认。

内容的提问来源于stack exchange，提问作者Jason