Ddev/WordPress/Gulp环境下BrowserSync问题：根目录与子目录无法兼容

修正后的Gulp BrowserSync配置 #

替换你的serve2函数为以下代码：

function serve2(done) {
  server.init({
    open: false,
    proxy: {
      target: "http://web:80", // 指向DDEV web容器内部服务地址
      changeOrigin: true,
      proxyUrl: "https://test.ddev.site:3000", // 外部访问BrowserSync的完整地址
      rewriteRules: [
        {
          match: /^Location: https?:\/\/test\.ddev\.site(\/.*)?$/i,
          replace: 'Location: https://test.ddev.site:3000$1'
        }
      ]
    },
    host: "web",
    https: true,
  });
  done();
  // 简化watch路径写法
  watch(`${themePath}assets/scss/*.scss`, buildStyles).on('change', server.reload);
  watch(`${themePath}**/*.php`).on('change', server.reload);
}

export const serves2 = serve2;

配置说明 #

1. target: "http://web:80"：直接使用DDEV容器内部的服务名web访问应用，避免容器内外地址混淆，彻底解决子目录重定向到localhost导致404的问题。
2. changeOrigin: true：确保代理请求时传递正确的Host头（test.ddev.site），让后端应用生成符合当前域名的URL路径。
3. rewriteRules：拦截根目录访问时后端返回的重定向响应，自动在Location头中添加3000端口，解决根目录跳转到不带端口地址、实时重载失效的问题。
4. https: true：匹配DDEV的HTTPS环境，避免协议不一致引发的额外重定向。

DDEV端口配置保持不变 #

你当前的.ddev/docker-compose.browsersync.yaml端口映射配置是正确的，无需修改。

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