2

我想设置一个 browsersync 代理，以便将 CSS 和 Javascript 注入任意网站。

但是，我开始使用 browsersync 创建一个简单的代理，试图为我提供我的 _custom.css 文件。

var browserSync = require('browser-sync').create();

browserSync.init({
    proxy: {
        target: "www.google.com"
    },
    port: 9000,
    serveStatic: ["app/static"],
    logLevel: "debug",
    files: "app/static/_custom.css",
    snippetOptions: {
        rule: {
            match: /<\/head>/i,
            fn: function (snippet, match) {
                return '<link rel="stylesheet" type="text/css" href="/_custom.css"/>' + snippet + match;
            }
        }
    }
});

当我直接连接到网络时，这很好用。现在我的问题是，在某些情况下，我在网络后面有一个 http 代理。

通过一些研究我发现，我应该使用 browsersync 选项“中间件”。最后我扩展了我的配置：

var browserSync = require('browser-sync').create();
var proxyMiddleware = require('http-proxy-middleware');
var proxyURL = 'http://192.168.0.55:8080';
var proxy = proxyMiddleware('/', {target: proxyURL, logLevel: 'debug'});

browserSync.init({
    proxy: {
        target: "www.google.com",
        middleware: [proxy]
    },
    port: 9000,
    serveStatic: ["app/static"],
    logLevel: "debug",
    files: "app/static/_custom.css",
    snippetOptions: {
        rule: {
            match: /<\/head>/i,
            fn: function (snippet, match) {
                return '<link rel="stylesheet" type="text/css" href="/_custom.css"/>' + snippet + match;
            }
        }
    }
});

但是，它没有用，我不知道问题出在哪里。有时我会得到一个带有无限循环的空白页面。有时浏览器会在代理错误页面停止。

有人能帮我吗？

4

0 回答 0