Question

我想设置一个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选项＆＃34;中间件＆＃34;。我最终扩展了我的配置：

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;
            }
        }
    }
});

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

有人可以帮助我吗？

坐在http代理后面设置Webpack Browsersync代理

0 个答案: