Question

我正在从本地系统在WordPress网站上工作，并使用带有浏览器同步功能的Gulp来自动刷新浏览器中的更改。为此，我使用了本地Apache服务器的代理。

这在我的本地计算机上正常工作，但是当我尝试从外部URL访问站点时，我遇到了问题。我可以通过外部URL很好地访问主页，但是当我单击任何链接时，即使href指向外部URL，它也会重定向到localhost。

我知道WordPress总是提供完整的URL，这可能会导致链接绕过browsersync，但是为了确保不会发生这种情况，我将WP_HOME和WP_SITEURL配置为指向BrowserSync侦听的端口3000。

define( 'WP_HOME', 'http://flare-dev.local:3000' );
define('WP_SITEURL','http://flare-dev.local:3000' );

这是我的浏览器同步设置： gulpfile.js中的相关部分

var browserSync = require( 'browser-sync' ).create();
var cfg = require( './gulpconfig.json' );
gulp.task( 'browser-sync', function() {
  browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );
} );

gulpconfig.json中的相关部分：

  "browserSyncOptions" : {
    "proxy": {
      "target": "localhost:80/"
    },
    "notify": false,
    "open": false,
    "host": "flare-dev.local",
    "port": 3000
  },
  "browserSyncWatchFiles" : [
    "./css/*.min.css",
    "./js/*.min.js",
    "./**/*.php"
  ]

我已经在BrowserSyncOptions中尝试了多个不同的设置，分别用于代理，中间件和rewriteRules，但是没有任何改变。任何帮助将不胜感激！

Answer 1

可能您正在localhost：80上运行，并且未使用正确的代理URL。不要写localhost：80 /您的站点，而只写localhost /您的站点

browserSync.init({
        proxy: {
            target: "http://localhost/yoursite/"
        }
});

Rest you know, use reload with gulp.watch.

export const reload = (done) => {
    browserSync.reload();
    done();
}

您知道的话，请对gulp.watch使用reload。例如 gulp.watch('**/*.php', reload);

Answer 2

您遇到此问题的原因是，Wordpress通过完整的URL（例如http://localhost:80/wp-content/theme/some.css）引用了样式表和其他文件，并且这些请求是在BrowserSync的代理（即http://localhost:3000/wp-content/theme/some.css）之外进行的。

要解决此问题，您需要让BrowserSync使用rewriteRules重写这些链接。

以下内容会将所有localhost：80重写为localhost：3000，强制所有流量直接通过BroswerSync而不是通过Apache。

rewriteRules: [
    {
        match: /localhost:80/g,
        fn: function (req, res, match) {
            return 'localhost:3000';
        }
    }
]

PS：这里另一个答案建议的具有正确的代理设置也很重要。

proxy: {
    target: "http://localhost/yoursite/"
}

请注意，由于重写功能是Javascript而不是JSON对象，因此您需要在gulpconfig.json之外使用它。您将需要直接将其合并到gulpfile.js中。代替：

browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );

您将需要类似的东西

browserSync.init(
    cfg.browserSyncWatchFiles, 
    Object.assign(
        cfg.browserSyncOptions, {
            rewriteRules: [
                {
                    match: /localhost:80/g,
                    fn: function (req, res, match) {
                         return 'localhost:3000';
                    }
                }
            ]
        }
    ) 
 );

使用外部网址通过BrowserSync访问WordPress时，它将重定向到localhost

2 个答案: